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除外

参考:https://www.cnblogs.com/loveyaxin/p/11151586.html