Question

可能重复：
Javascript - this Vs. prototype

This article表示原型对象还可以帮助您快速将自定义方法添加到反映在其所有实例上的对象。

但是这段代码（不使用原型对象）也为所有实例添加了方法：

function al(){
  this.show = function(){alert('hi!')}

}

var x = new al();
x.show();

var y = new al();
y.show();

这里的原型对象有什么优势？我误读了那篇文章吗？

Answer 1

这里的区别在于您将方法show添加到al的实例而不是原型。添加到原型会影响al的所有实例，同时添加到实例仅影响该实例。

这是一个将show添加到原型与实例

的示例

function al() {

}

al.prototype.show = function () { alert("hi"); };

现在的关键是，现在al的每个实例都可以访问附加到原型的show的单个实例。更强大的是通过原型增强现有对象的能力

var x = new al(); 
console.log(x.Prop);  // x.Prop === undefined
al.prototype.Prop = 42;
console.log(x.Prop);  // x.Prop === 42

Answer 2

主要问题是内存使用情况。您的第一个代码示例将为您的类的每个实例创建函数“show”的新副本。如果使用prototype方法，则在所有实例之间共享一个函数的副本。然后，函数中的“this”运算符用于访问正在编辑的实例。

对于两个或三个实例而言，这可能并不重要，但如果可能有数百或数千个实例，则每个实例具有单独的功能副本将对应用程序的性能产生巨大影响。

Answer 3

是的，区别在于，当您按照自己的方式执行此操作时，每个al实例都有自己的show方法副本。

如果将其放在原型上，则所有实例共享方法的副本，并在调用方法时为您应用上下文（即范围）。将方法放在原型上会更有效率。

Answer 4

这意味着如果您想在定义后将成员函数或变量添加到al - 特别是如果al是由其他人定义的话。如果您不了解原型设计，可以尝试以下方法：

function al(){
  this.show = function(){alert('hi!')}

}

al.newfunction = function(){alert('hello!')}

var x = new al();
x.show();
// THIS WILL FAIL
x.newfunction();

相反，你需要说：

al.prototype.newfunction = function(){alert('hello!')}

var x = new al();
x.show();
// THIS WILL SUCCEED
x.newfunction();

Answer 5

您定义的show方法将作为al对象的一部分进行decalred。 prototype允许您执行现有的课程。下面有一个例子，它会为字符串对象添加一个'trim'函数。将函数添加到代码后，“trim”函数将可用于字符串对象的所有实例

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };

Answer 6

见这个例子。

<script>
  function al(){
    this.show = function(){alert('hi!')}
  }

  var x = new al();
  x.show();

  var y = new al();
  y.show();
  y.test = function (){alert('no prototype!')};
  y.test();
  //x.test(); // error 

  al.prototype.test2 = function (){alert('prototype!')}; // edit al prototype
  y.test2(); // no error
  x.test2(); // no error
</script>

javascript原型混乱

6 个答案: