javascript 原型及原型链

时间:2020-11-29 14:40:02

构造函数创建一个对象

function Person () {}
var p1 = new Person()

Person 是一个构造函数,通过new操作符创建一个p1实例。

prototype属性

每个构造函数都有一个prototype属性,该属性指向一个对象,该对象就是通过构造函数创建出来的实例原型,既上述例子中的p1原型;

__proto__属性

每个JavaScript对象(除null)都有一个__proto__属性,这个属性会指向该对象的原型

constructor属性

由于一个构造函数能够生成很多实例,那实例原型怎么跟创建实例的构造函数关联呢?正是由于每个原型对象都有一个constructor属性,是关联实例原型与构造函数的

javascript 原型及原型链

p1.__proto__ === Person.prototype  // true 实例__proto__ 指向实例原型
Person.prototype.constructor === Person  // true  实例原型关联实例的构造函数
原型的原型

JavaScript的对象都具有一个__proto__属性,因此原型对象也具有一个__proto__属性指向它的原型。在JavaScript中,Object是最顶层的对象(除了null)对象,所以原型最终指向了它的原型Object.prototype,Object.prototype的__proto__属性指向null

javascript 原型及原型链

原型链

相信大家看了上图应该猜到原型链式什么意思了吧,其实就是对象在查找属性或方法时,首先会在自己身上寻找,如果本身没有该属性或方法,就会沿着原型链一层一层的向上查找,直至查找到Object.prototype对象上时就停止查找了,如果这个原型上也没有就会返回undefined

javascript 原型及原型链

上图执行p1.namep1.age 分别开始在p1对象上查找属性,p1 上有name属性,则返回xiaomingage属性在p1上没有,则会沿着原型链上继续查找,直至查找到Object.prototype上停止查找,返回undefined。

构造函数原型

说了那么多,都是实例与原型在“玩耍”,那Person函数呢?其实构造函数也具有一个__proto__属性,指向Function.prototype原型对象。Function.prototype.__proto__ 指向他的原型 Object.prototype。最后附上一张“眼花缭乱”图,这张图描述的原型、构造函数、实例、原型链关系比较清楚。

javascript 原型及原型链