Javascript 原型属性'

debugcn 发表于 Dev

伟大的斯科特

我正在遵循 javascript 中关于“函数构造函数”和“原型链”的逻辑，但是我试图解决原型链的重要性，即它究竟是如何被需要的。

函数构造函数对于创建对象很有用，--对吗？因此，在使用“函数构造函数”创建对象时，该对象是否尚未拥有指向链中更高位置的“全局对象”的指针？...如果是这样，为什么还要包含这个“原型属性”呢？或者...原型属性是否真的“实例化”了将函数对象链接到全局对象的继承链。

如果原型属性没有实例化对象的本地和全局上下文之间的链接，为什么还要包含它呢？如果我从函数构造函数的属性列表中省略原型属性，会发生什么变化？

我只需要在原型属性的目的背后有一个清晰、简洁的原因，这在这一点上是有道理的，但就它如何对继承链做出贡献而言仍然没有意义。

谢谢阅读。

约瑟夫

我只需要在原型属性的目的背后有一个清晰、简洁的原因，这在这一点上是有道理的，但就它如何对继承链做出贡献而言仍然没有意义。

让我们以这段代码为例：

function Foo(prop) {
  this.fooProperty = prop
}

Foo.prototype.greetFoo = function() {
  console.log('hi from foo')
}

function Bar(prop1, prop2) {
  Foo.call(this, ...arguments)
  this.barProperty = prop2
}

// Replace the default Bar.prototype object with one that links to Foo.prototype
Bar.prototype = Object.create(Foo.prototype)
Bar.prototype.greetBar = function() {
  console.log('hi from bar')
}

const barInstance1 = new Bar('baz', 'rar')
const barInstance2 = new Bar('qum', 'yas')

barInstance1.greetFoo()
barInstance2.greetFoo()
barInstance1.greetBar()
barInstance2.greetBar()

以上将产生以下原型链：

Object.prototype <- Foo.prototype <- Bar.prototype <- barInstance1
                    > greetFoo()     > greetBar()     > fooProperty = 'baz'
                                                      > barProperty = 'rar'
                                                   <- barInstance2
                                                      > fooProperty = 'qum'
                                                      > barProperty = 'yas'

在传统的 OOP 中，类是“蓝图”，实例是从实例化类的继承层次结构的“扁平/合并”蓝图创建的对象。JS“继承”的工作方式与此不同。JS 继承使用链接的、活动的对象的层次结构，而不是蓝图。

当你访问实例上没有的东西（比如greetFoo()和greetBar()）时，JS 会递归查找链来找到它。该链可能涉及其他原型，具有更多功能。这就是 JS“代码共享”的工作原理。

在上面的例子中，

barInstance1并barInstance2链接到Bar.prototype. 两个实例现在都有greetBar().
Bar.prototype也链接到Foo.prototype，这意味着实例也会得到greetFoo。
最后，Foo.prototype链接到内置Object.prototype，使所有实例都可以访问所有原生对象的方法，如hasOwnProperty，toString()等。