理解 JavaScript 原型和原型链

By bobo 2021-12-21 20:44:52 文章分类:JavaScript

想理解透 JS 的继承,必须对JS的原型和原型链理解清楚,以下必记知识点:

  1. 每个函数都有一个 prototype 对象,这个属性是一个对象,我们称 prototype 为原型对象,prototype 原型对象的作用就是可以共享一些属性和方法,当一个对象查找某个属性或者方法的时候,首先从当前对象查看,如果没有查询到就会从它的 prototype 对象上进行查询。

  2. 每个实例对象会有一个 __proto__ 属性

  3. 实例对象的 __proto__ 指向的是创建它的构造函数的 prototype 对象

那么构造函数的 prototype 属性也是一个对象,它也存在一个 __proto__ 属性,指向创建它的构造函数,以此类推,一直到 Object.prototype.__proto__ 的顶端就是 null,这个链条我们可以称为原型链。原型链最大的作用可以为对象查找原型对象提供了一种关系查找,另外 js 的继承就是依靠原型链来继承的。

function F(name) {
  this.name = name
}

var f = new F('JS')
console.log(f.__proto__ === F.prototype) // true
console.log(F.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true, null 是最顶端

// 特殊的一点,函数也是一个对象
console.log(F.__proto__ === Function.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true

// 通过 new 操作符调用函数可以创建实例对象,内部做了原型链的链接
console.log(Object.__proto__ === Function.prototype) // true

以下的图画得很好,好好理解,对理解原型链很有帮助:

img