Question

说我有以下功能

function FooController (){
  this.foo = function () {
    alert('foo');
  }
}

FooController.prototype.bar = function () {
  alert('bar');
}

这两种语法之间有区别吗？为什么我会使用一个而不是另一个？是否有性能受损？

Answer 1

如果在原型上定义，FooController的任何实例都将继承＆＃34;继承＆＃34; bar方法，因为它位于实例的原型链中。使用此技术仅定义了1个函数并在内存中。

如果使用this.foo = function进行定义，则可以将该函数作为该实例的属性直接添加到实例中。这意味着每个控制器实例在内存中将有1个函数。

function FooController {}

FooController.prototype.hello = function() {
  console.log("world");
};

创建一个实例并检查原型的值

var c = new FooController();
c.hello(); // "world"

这是预期的，但我们可以直接在hello实例

上定义c方法

c.hello = function() { console.log("cats"); };
c.hello(); // "cats"

我们仍然可以直接调用原型方法

c.prototype.hello.call(c); // "world"

或者我们可以delete hello实例上的c属性

delete c.hello;

现在让我们再次调用我们的函数

c.hello; // "world"

它回到使用原型的方法！

Answer 2

FooController的所有实例都将共享bar，每个对象将单独创建每个foo。

一般情况下，您希望使用this.语法创建属性，因此它们不会被共享，并且使用原型语法创建函数（在许多相同的函数中没有任何意义））

如果将函数放在原型上，可能会遇到麻烦。使用原语你不会注意到它们之间的区别，因为写入它们会写入本地对象并忽略原型，但是你可能会导致像这样的数组出现问题。

function FooController (){
  this.foo = function () {
    alert('foo');
  }
}

FooController.prototype.bar = [];

var a = new FooController();
var b = new FooController();

a.bar.push['hi'];

alert(b.bar.length); //1

原型与功能定义

2 个答案: