javascript - 函数应该附加到对象或其原​​型上吗？

Question

我正在学习 javascript，我想知道对象内部的函数和原型(prototype)的概念。

我对概念的理解

据我了解，函数应该附加到对象的原型(prototype)以分配更少的内存。

例如(如果我说的是真的)，两个版本都会做同样的工作，但第二个版本会分配更少的内存:

var collectionOfObjects = [];
for(var i=0; i<1000; i++){
    collectionOfObjects.push({id: 2, sayHi: function(){console .log('hi')}})
}
//vs
function Foobar(id){
    this.id = id || 0;
}
Foobar.prototype.sayHi = function(){
    console.log('hi');
}
var otherCollection = [];
for(var i=0; i<1000; i++){
    otherCollection.push(new Foobar());
}

问题

//this attaches sayHi function to the object instead of its prototype
var foobar = {
    id: 0,
    sayHi: function(){
        console.log('Hi');
    }
}

因为我不应该使用 __proto__ ，如何附上 sayHi函数到 foobar 的原型(prototype)而不是 foobar 对象？我假设添加 sayHi至 Object.prototype不是一个好的解决方案，因为它会添加 sayHi作用于每个对象。

Answer 1

原型(prototype)链通过 new 设置。关键字，一个 class或 Object.create() .无论哪种方式，它都是在创建对象时设置的。

所以你已经知道了一种方法，就是将函数添加到构造函数的原型(prototype)中，并用new 进行实例化。 .

现代方法是使用 class ，但你在这里特别提到了遗留代码，所以我假设这是出于讨论的目的。

最后一种方法是使用Object.create()它给你一个带有一些原型(prototype)的对象:

var myProto = {
  // There is only one of this function, ever.
  sayHi: function() {
    console.log('hi');
  }
}

var otherCollection = [];
for(var i=0; i<1000; i++){
    var obj = Object.create(myProto)
    obj.id = i // or other custom setup.
    otherCollection.push(obj);
}

也就是说，在现代 javascript 引擎中，每个对象具有独特的功能并不是什么大问题。由于函数实例的数量根本就不是性能瓶颈，我已经处理了一些非常大的 javascript 应用程序和内存使用情况。

例如，在带有函数钩子(Hook)的现代 React 中，避免在每次渲染时创建数百个新函数将非常麻烦(如果在某些情况下不是不可能的话)。它被设计成这样，它仍然表现得非常好。如果它表现不好，那绝不是因为功能太多。