写在前面
对于初学者而言,原型链是一个比较难懂的概念,而且百度上解释原型链的五花八门,看得越多就越觉得不懂,我就是这样,看得越多,就越觉得原型链这个概念深不可测,但幸好,看到最后,自己可以融会贯通了。
弄懂原型链的作用
原型链的作用是用来继承的,很多文章都在讲原型链的原理是怎么样,但对如何使用原型链实现继承都只字未提。在看这篇文章前,我希望读者们对原型链已经有一定程度的了解了,至于接不接受我对原型链的看法,需要读者自己去甄别了,所谓尽信书不如无书,在检验理论是否正确的时候,需要读者记住实践是检验真理的唯一标准,一定要动手实践。
下面这是一个如何使用原型链实现继承的例子:
function A()
{
}
function B() {
this.name="你好";
};
A.prototype = new B();
//为什么要加上这一句?
A.prototype.constructor=A;
var a=new A();
//a.name=‘你好’
console.log(a.name);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
原型链中三个重要原则:
原则1: 任何一个构造函数都有一个prototype属性,指向一个对象,称这个对象为prototye对象
原则2: 每个对象都有一个constructor属性,指向这个对象的构造函数。JavaScript
规定:构造函数的prototype对象的constructor属性指向它本身。即:
function A(){
}
alert(A.prototype.constructor==A);//true
- 1
- 2
- 3
原则3: 构造函数(Function)拥有prototype属性,对象(除Object)拥有_ proto_ 属性。且,构造函数所生成的实例对象的_ proto _属性指向构造函数的p rototype属性。即:
function A(){
}
var a=new A();
alert(a.__proto__==A.prototype);//true
- 1
- 2
- 3
- 4
弄懂头疼的_ proto_ 和prototype
当我看见百度上解释原型链的文章里一会是_ proto_ ,一会是prototype, 我就开始一个头两个大。直到我明白了它两者之间的关系后,突然就豁然开朗。
_ proto_和prototype的关系 :一个实例对象拥有一个指向原型的proto属性(即原则3: 实例对象的_ proto_指向构造其构造函数的prototype),_ proto 属性是不可见的,但是在某些浏览器中以 proto _的形式将该属性暴露出来供开发者调试,该属性被称之为“内部原型链”(该原型链才是真正的原型链),而prototype是留给开发者们用来显式地定义原型链的。他们的关系可以说是一表一里,一个是外在,一个是实质。
彻底弄懂原型链
在经过上面的铺垫后,下面这张图应该很好理解:
真正的原型链即是 _ prpto _属性练起来的那条链!
好了,到这,我们该处理遗留的历史问题了,将第一个例子在稍稍改写一下,更加直观
function A()
{
}
function B() {
this.name="你好";
};
var b=new B();
A.prototype = b ;
//为什么要加上这一句?A.prototype.constructor=A;将这句去掉,看alert的结果是什么
alert(A.prototype.constructor);
var a=new A();
//a.name=‘你好’
console.log(a.name);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
可以看出,如果去掉A.prototype.constructor=A这一句的话,我们alert的结果是 function B() {
this.name=”你好”;
};这是为什么呢?
根据原则2,“构造函数的prototype对象的constructor属性指向它本身”,在
var b=new B();
A.prototype = b ;
- 1
- 2
这两句的作用下,A.prototype的对象是b,而b是函数B() new出来的,当然,A.prototype.constructor的结果是B()。
所以这就需要我们手动的调整constructor的指向,
var b=new B();
A.prototype = b ;
A.prototype.constructor=A
- 1
- 2
- 3
结语
所以,对于原型链,会用继承,并且知道背后的原理就行啦!