每个JavaScript对象都有一个名为[[Prototype]]的内部“槽”,其值要么为null,要么为对象。您可以将槽视为对象的属性,在JavaScript引擎内部,隐藏在编写的代码中。[[Prototype]]周围的方括号是故意的,是表示内部插槽的ECMAScript规范约定。
一个对象的[[Prototype]]所指向的值,通俗地说就是“该对象的原型”
如果您通过点(obj.propName)或括号(obj['propName'])表示法访问属性,并且对象没有直接具有这样的属性(即自己的属性,可通过obj.hasOwnProperty('propName')检查),则运行时会在[[Prototype]]引用的对象上查找具有该名称的属性。如果[[Prototype]]也没有这样的属性,则依次检查其[[Prototype]],依此类推。这样,将遍历原始对象的原型链,直到找到匹配项或到达其终点。原型链的顶部是空值。
现代JavaScript实现允许通过以下方式对[[Prototype]]进行读和/或写访问:
新运算符(在从构造函数返回的默认对象上配置原型链),extends关键字(使用类语法时配置原型链),Object.create将提供的参数设置为结果对象的[[Prototype]],Object.getPrototypeOf和Object.setPrototype Of(在创建对象后获取/设置[[Prototype]]),以及名为__proto__(类似于4)的标准化访问器(即getter/setter)属性
Object.getPrototypeOf和Object.setPrototype of优于__proto__,部分原因是当对象的原型为null时,o.__proto__的行为是不寻常的。
对象的[[Prototype]]最初是在创建对象期间设置的。
如果通过new Func()创建新对象,则默认情况下,对象的[[Prototype]]将设置为Func.Prototype引用的对象。
因此,请注意,所有类和所有可以与新运算符一起使用的函数,除了它们自己的[[prototype]]内部槽之外,还有一个名为.prototype的属性。这种“原型”一词的双重使用是该语言新来者无尽困惑的根源。
在构造函数中使用new允许我们模拟JavaScript中的经典继承;尽管正如我们所见,JavaScript的继承系统是原型的,而不是基于类的。
在JavaScript引入类语法之前,构造函数是模拟类的唯一方法。我们可以将构造函数的.prototype属性引用的对象的财产视为共享成员;即每个实例相同的成员。在基于类的系统中,方法对每个实例的实现方式相同,因此方法在概念上被添加到.prototype属性中;然而,对象的字段是特定于实例的,因此在构造过程中会添加到对象本身。
如果没有类语法,开发人员必须手动配置原型链,以实现与经典继承类似的功能。这导致了实现这一目标的多种方式的优势。
这里有一种方法:
function Child() {}
function Parent() {}
Parent.prototype.inheritedMethod = function () { return 'this is inherited' }
function inherit(child, parent) {
child.prototype = Object.create(parent.prototype)
child.prototype.constructor = child
return child;
}
Child = inherit(Child, Parent)
const o = new Child
console.log(o.inheritedMethod()) // 'this is inherited'
…还有另一种方法:
function Child() {}
function Parent() {}
Parent.prototype.inheritedMethod = function () { return 'this is inherited' }
function inherit(child, parent) {
function tmp() {}
tmp.prototype = parent.prototype
const proto = new tmp()
proto.constructor = child
child.prototype = proto
return child
}
Child = inherit(Child, Parent)
const o = new Child
console.log(o.inheritedMethod()) // 'this is inherited'
ES2015中引入的类语法简化了事情,通过提供extends作为配置原型链的“一种真正的方式”,以模拟JavaScript中的经典继承。
因此,与上面的代码类似,如果您使用类语法创建一个新对象,如下所示:
class Parent { inheritedMethod() { return 'this is inherited' } }
class Child extends Parent {}
const o = new Child
console.log(o.inheritedMethod()) // 'this is inherited'
…结果对象的[[Prototype]]将被设置为Parent的一个实例,其[[Prototype]]又是Parent.Prototype。
最后,如果您通过object.create(foo)创建一个新对象,则生成的对象的[[Prototype]]将设置为foo。