JavaScript .prototype如何工作？

一尘不染

JavaScript .prototype如何工作？

javascript

我不喜欢动态编程语言，但是我写了相当一部分JavaScript代码。我从来没有真正了解过这种基于原型的编程，有人知道它是如何工作的吗？

var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

我记得很久以前与人们进行过多次讨论（我不确定自己在做什么），但是据我了解，这里没有一个课堂的概念。这只是一个对象，这些对象的实例是原始对象的副本，对吧？

但是，此“ .prototype”属性在JavaScript中的确切目的是什么？它与实例化对象有何关系？

更新：正确的方法

var obj = new Object(); // not a functional object
obj.prototype.test = function() { alert('Hello?'); }; // this is wrong!

function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert('OK'); } // OK

阅读 351

2020-04-22

共1个答案

一尘不染

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

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

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

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

的new操作者（设定从一个构造函数返回的默认对象上的原型链），
的extends关键字（使用类语法时配置原型链），
Object.create将提供的参数设置为[[Prototype]]结果对象的，
Object.getPrototypeOf和Object.setPrototypeOf（[[Prototype]] 在创建对象后获取/设置），以及
命名的标准化访问器（即getter / setter）属性__proto__（类似于4）。

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

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

如果您通过创建新对象new Func()，则[[Prototype]]默认情况下，该对象的设置为所引用的对象Func.prototype。

因此，请注意，
所有类以及可与new运算符一起使用的所有函数.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'

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。

2020-04-22