您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

JavaScript .prototype如何工作?

JavaScript .prototype如何工作?

每个JavaScript对象都有一个内部“插槽”,[[Prototype]]其值称为nullobject。您可以将插槽视为JavaScript引擎内部对象的属性,该属性对您编写的代码隐藏。方括号[[Prototype]]是有意的,并且是ECMAScript规范约定,用于表示内部插槽。

对象的所指向的值[[Prototype]]俗称“该对象的原型”。

如果您通过点(obj.propName)或方括号(obj['propName'])表示法访问属性,而该对象没有直接具有这样的属性(即,自己的属性 ,可通过进行检查obj.hasOwnProperty('propName')),则运行时将在引用的对象上查找具有该名称属性[[Prototype]]代替。如果[[Prototype]] 没有这样的属性[[Prototype]]则依次检查其,依此类推。这样,原始对象的 原型链 就会遍历,直到找到匹配项或到达末尾为止。null价值是原型链的顶部。

现代JavaScript实现允许[[Prototype]]通过以下方式对进行读和/或写访问:

Object.getPrototypeOf比之更Object.setPrototypeOf受推荐__proto__,部分原因o.__proto__ 是当对象的原型为时,行为异常null

[[Prototype]]在创建对象时首先设置对象的。

如果您通过创建新对象new Func(),则[[Prototype]]认情况下,该对象的设置为所引用的对象Func.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'

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

javascript 2022/1/1 18:13:58 有407人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶