图解原型和原型链-彻底搞懂原型

192 阅读2分钟

1.什么原型对象?

每个函数在创建的时候,都会生成一个属性prototype,这个属性指向一个对象,这个对象就是此函数的原型对象

每个实例对象都有一个__proto__属性(又叫隐式原型属性),指向它构造函数的原型对象。

原型对象的作用就是用来实现继承,通过原型链实现原型继承。

在函数的原型对象上添加属性

function Person() {
}
//原型对象上添加属性
Person.prototype.x = 30;
Person.prototype.y = 40;

实例对象继承原型对象

const person = new Person();
console.log(person.x);
console.log(person.y);
console.log(person.__proto__ === Person.prototype);//true;

​ 上面通过 new Person()创建了一个实例对象,这个实例对象有一个__proto__指向它构造函数的原型对象,这样就完成了原型继承。

图解原型继承:

原型继承.png

函数也是一个对象,函数也有一个__proto__属性指向它的构造函数。

函数的构造函数是Function构造函数,所有的函数都是通过new Function()创建的。

图解函数的原型关系

函数的原型对象.png

函数都有一个__proto__属性指向它的构造函数,那么Function的构造函数是谁?

答:Function构造函数的构造函数就是自己,所以Function构造函数的__proto__指向自身的原型对象

图解Function的原型关系 Function.png

是函数就会有prototype属性指向函数的原型对象,和__proto__指向它构造函数的原型对象。是对象就会有__proto__指向它构造函数的原型对象,那么原型对象的也该有一个__proto__指向它的构造函数,那原型对象的构造函数是谁?

答:原型对象的构造函数时Object构造函数,所以原型对象都有一个__proto__属性,指向于Object构造函数的原型对象。

原型对象的__proto__

Object.png

​ 所有的函数都是Function构造函数的实例,Object也不例外,所以Object也有一个__proto__指向于Function构造函数的原型对象。并且Object的原型对象的__proto__的值是null,所以Object的原型对象就是原型链的尽头。

最终一个完整的关系图

完整.png

原型链

原型链又叫隐式原型链,原型链的作用是用来查找对象的属性的,如果一个属性在当前的对象上没有找到就会沿着__proto__一直查找,直到__proto__的值为null,还是找不到则返回undefined。

原型链的作用:1.实现原型继承 2. 通过原型链查找属性。

Perosn实例的原型链:

原型链.png