JS原型链

大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。

今天给大家带来的是:JS原型链

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

JavaScript对象是一个属性的集合,另外有一个隐式的对象:原型对象。原型的值可以是一个对象或者null。一般的引擎实现中,JS对象会包含若干个隐藏属性,对象的原型由这些隐藏属性之一引用,我们在本文中讨论时,将假定这个属性的名称为"__proto__"(事实上,SpiderMonkey内部正是使用了这个名称,但是规范中并未做要求,因此这个名称依赖于实现)。 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个链就是原型链。

先来看看有什么用处

function Foo(){ this.y=2; } Foo.prototype.x=1; var obj3 = new Foo(); obj1.y;//2 obj1.x://1

这里就是用原型链继承了Foo的属性 obj1的原型(proto)会指向Foo的prototype属性 当函数声明的时候——function Foo(){} 实质上在做: 这个函数会有一个prototype属性,且默认会有两个属性 Foo.prototype { constructor:Foo, __proto__:Object.prototype } prototype是函数对象上的预设的对象属性,而原型通常都是其构造器的prototype属性 实例的__proto__属性会指向构造函数的prototype属性

2.知识剖析

ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。

JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined.原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

原型的动态性:对原型对象所做的实时修改都能从实例上立即反应出来。(注意区别添加修改和重写了原型对象)

原型对象包含指向构造函数的指针。a实例包含指向a原型对象内部的指针,使得我们可以访问原型对象的属性。如果让b原型对象等于a对象的实例那我们就可以访问a对象的原型对象及其属性和方法了。同理a的原型对象也可以是通过该种方法从c继承过来...

1.概念 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用 __proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止!

(1)原型:创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。 (2)原型对象:无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。

普通对象和函数对象

JS中万物皆对象,但对象也是有区别的,分为普通对象和函数对象,Object、Function是JS自带的函数对象,上栗子

var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

3.常见问题

原型链怎样实现继承

4.解决方案

原型对象包含指向构造函数的指针,这使得子类可以访问到构造函数中的属性。实例包含指向原型对象的内部的指针。

ex:

a实例包含指向a原型对象内部的指针,使得我们可以访问原型对象的属性。如果让b原型对象等于a对象的实例那我们就可以访问a对象的原型对象及其属性和方法了。同理a的原型对象也可以是通过该种方法从c继承过来...

5.编码实战

先给大家引入一个例子:组合使用构造函数模式和原型模式创建自定义类型

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.friends = ["Lance","Alice"];

}

Person.prototype = {

constructor : Person;

sayName : function() {

alert(this.name);

}

}

实现原型链的基本模式举例:

function SuperType (){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

}

function SubType() {

this.subproperty = false ;

}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue());    //true

6.扩展思考

原型链继承方式存在的问题。以及怎样解决

7.参考文献

《JavaScript高级程序设计》

8.扩展思考

其他实现继承的方法还有哪些?

鸣谢

感谢大家观看


js原型链浅析_腾讯视频

推荐阅读更多精彩内容