我如何搞懂Javascript系列之原型和原型链

理解原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链。

构造函数创建对象

JavaScript 中使用 new 操作符，通过构造函数初始化新对象。我们先使用构造函数创建一个对象。

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(ninja.swung) // true

在上面例子中，简单的通过 Ninja 构造器实例一个对象。接下来我们通过这个例子详细展开。

prototype

在 JavaScript 中，函数可以有属性。每个函数都有一个特殊的属性叫作原型（prototype）。例如：

function Ninja() { 
  
}

Ninja.prototype.swung = true
const ninja = new Ninja()
console.log(ninja.swung) // true

上面例子中 Ninja 函数的 prototype 属性指向的是一个对象，被构建的实例对象 ninja 的原型也指向这个对象。关于 ninja 原型则在下面详细展开：

proto

在 JavaScript 中，实例对象的原型属性是内置属性（使用标记 [[prototype]]）。ES6之前 ECMAScript 标准没有提供接口访问这个属性的，但是许多浏览器都实现了 JavaScript 非标准的内置属性proto来访问对象属性。

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(ninja.__proto__ === Ninja.prototype) // true

每一个JavaScript对象(除了null)都具有proto属性，这个属性会指向该对象的原型。

接着在看下面这个例子：

function Ninja() { 
    this.swung = true;
}

const ninja = new Ninja()
console.log(Object.getPrototypeOf(ninja) === Ninja.prototype) // true

ES6开始，ECMAScript 标准提供了 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问器来访问和设置原型。proto它本质上是一个内部属性，而不是一个正式的对外的 API，只是由于浏览器广泛支持，才被加入了 ES6，所以建议不要使用。

上面例子中构造函数原型和实例对象原型是相同的，它们的原型中还包含一个特殊的属性 constructor 用于指向构造函数。

constructor

每个原型都有一个 constructor 属性指向关联的构造函数。

function Ninja() { 
  
}

console.log(Ninja.prototype.constructor === Ninja) // true

构造函数、实例对象和 constructor 关系图

image

原型链

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

举个例子：

function Ninja() { 
  
}

Ninja.prototype.swung = true
const ninja = new Ninja()
ninja.swung = false
console.log(ninja.swung) // false

delete ninja.swung
console.log(ninja.swung) // true

原型链的最顶层即原型链的终点Object.prototype为null,我们可以打印：

console.log(Object.prototype.__proto__) // null

null 表示“没有对象”，即该处不应该有值。

所以 Object.prototype.__ proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就停止查找了。