14、原型与原型链

56 阅读1分钟

在 JS 中,每个用function定义的函数,都有prototype属性,指向一个普通对象,该对象存储的数据可供其实例使用。

在 JS 中,每个对象都有__proto__属性,指向一个普通对象,该对象存储的数据可供其使用。

结合上面两句话,得出的结果为:实例.__proto__ === 构造函数.prototype

function Person() {}

const person = new Person()

person.__proto__ === Person.prototype // true

总结:对象有一个原型(__proto__),函数有两个原型(__proto__、prototype)

而原型链就是用来找属性/方法的一种规则,当在对象自身没有属性/方法时,则会去找其原型(__proto__)对象上,若没有则再从原型(__proto__)对象上的原型(__proto__)对象找

完整版的原型链

function Person() {}

const person = new Person()

// person(实例)与其构造函数 Person
person.__proto__ === Person.prototype // true

// 原型对象(实例)与其构造函数 Object
person.__proto__.__proto__ === Object.prototype // true

// 原型对象(实例)的原型对象(实例)与其构造函数 null,为了避免无限循环,所以等于 null
person.__proto__.__proto__.__proto__ === null // true

所有关系的原型链

如何判断实例:实例.__proto__ === 构造函数.prototype,也就是instanceof的核心判断,可以继承的哦

上述图中的关系为:

person.__proto__ === Person.prototype // true
Person.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true

person.__proto__.__proto__ === Object.prototype // true
Person.__proto__.__proto__ === Object.prototype // true
Function.__proto__.__proto__ === Object.prototype // true
Object.__proto__.__proto__ === Object.prototype // true

// 所以得出的实例关系为:
person instanceof Person // true
Person instanceof Function // true
Function instanceof Function // true

person instanceof Object // true
Person instanceof Object // true
Function instanceof Object // true
Object instanceof Object // true

// 其中比较有意思的是:Function、Object 它们互生,并且自生