javascript:方法的单独功能或嵌入对象中？

Question

这只是一个简单的问题。无论哪种方式都有效。我更喜欢我的第一个例子，但我不知道这样做是否会比第二个例子分配更多的内存，因为我们在对象上调用“new”....

例子1

var post = function(){
  var self = this;
  self.div = $('<div></div>');
  self.color = function(color){
    this.div.css({background:color});
  }
}

var p = new post();
p.color("#FFF");

例子2

var post = function(){
  self = this;
  self.div = $('<div></div>');
}

var color = function(p, color){
  p.div.css({background:color});
}

var p = new post();
color(p, "#FFF");

因此，在第一个示例中，我相信每次调用新帖子时都会重新创建颜色函数。如果我有 100 个 new post(); 调用怎么办？是否比仅定义一次函数的示例 2 效率低？

我问的有道理吗？

Answer 1

是的，在示例 1 中，“post”对象的每个实例都有一个单独的“color”函数实例，而在示例 2 中只有一个函数实例。显然，如果您打算有大量的“post”对象实例，那么你使用的内存比你需要的多。

在 JavaScript 中，典型的(或原型(prototype)!)使用两个示例中最好的部分解决此问题的方法如下(请注意，我使用的“Post”带有大写的“P” "，根据旨在与 new 运算符一起使用的构造函数的约定:

function Post() {
  this.div = $('<div></div>');
}

Post.prototype.color = function(color) {
  this.div.css({background:color});
}

var p = new Post();
p.color("#FFF");

在对象上查找属性时(例如我们示例中的“p.color”)，如果该属性未直接在实例上定义，则将其作为“原型(prototype)<”的属性进行查找”构造对象的函数(例如“Post.prototype.color”)。这也意味着您可以在原型(prototype)上定义实例方法，并根据需要直接在各个实例属性名称上分配新函数来覆盖它们。

这样我们仍然可以获得调用“p.color(...)”的良好的面向对象语法以及所有“Post”共享的只有一个函数方法实例的好处实例。