理解原型
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 关系图
原型链
当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。
举个例子:
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 就停止查找了。