javascript原型 图解
每次提到原型,原型对象,原型链都一头雾水.下文专门解开迷雾.
什么是原型?
在javascript中,每个函数都天然带有一个属性prototype(prototype翻译为原型),prototype指向一个对象,叫做原型对象,也叫原型.
原型对象至少有constructor和__proto__属性
如果觉得抽象,往下看图
什么是__proto__?
构造函数实例化的对象,天然带有__proto__私有属性.虽然它是非标准属性,但是各大浏览器都实现了它.
构造函数/实例/prototype/__protot__之间的关系图总结:
什么是原型链?
因为对象都有__proto__属性,而原型对象也是对象,所以原型对象也有__proto__属性
通俗来讲,原型链就是__proto__属性形成的链条.所有原型链都终结在Object.prototype.
调用实例的一个方法时,沿着原型链从最底端到最顶端查找,如果找到了就执行他,然后停止查找
从图中页可以看出.Object只有constructor,而没有__proto__属性了
prototype实现继承
实现继承的方法:
function Parent(name){this.name = name}
Parent.prototype.getName = function(){return this.name};
function Child(){}
Child.prototype.__proto__ = Parent.prototype;
// Child.prototype = Object.create(Parent.prototype);
// Object.setPrototypeOf(Child.prototype, Parent.prototype);
// 以上三种方式都是实现继承
看chrome代码执行图:
child.__proto__ == Child.prototype //true
而Child.prototype = new Parent('zx'),所以child.__proto__ 指向的是parent实例.
这样一来,原型链就串起来了,调用child.getName()时,沿着原型链,就找到了getName(),实现继承
在上面的例子中如果Child.prototype也有getName方法,执行child.getName()是,执行的是parent.getName()还是child.getName()?
--child.getName(),因为是沿着原型链从底端往顶端查找的,找到后执行,停止查找.
记住两点:
函数自带prototype属性
对象自带__proto__属性,null除外
