之间有什么区别

var A = function () {this.x = function () {//do something};
};

和

var A = function () { };
A.prototype.x = function () {//do something
};

#1楼

使用this而不是prototype的最终问题是，当重写方法时，基类的构造方法仍将引用被重写的方法。考虑一下：

BaseClass = function() {var text = null;this.setText = function(value) {text = value + " BaseClass!";};this.getText = function() {return text;};this.setText("Hello"); // This always calls BaseClass.setText()
};SubClass = function() {// setText is not overridden yet,// so the constructor calls the superclass' methodBaseClass.call(this);// Keeping a reference to the superclass' methodvar super_setText = this.setText;// Overridingthis.setText = function(value) {super_setText.call(this, "SubClass says: " + value);};
};
SubClass.prototype = new BaseClass();var subClass = new SubClass();
console.log(subClass.getText()); // Hello BaseClass!subClass.setText("Hello"); // setText is already overridden
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

与：

BaseClass = function() {this.setText("Hello"); // This calls the overridden method
};BaseClass.prototype.setText = function(value) {this.text = value + " BaseClass!";
};BaseClass.prototype.getText = function() {return this.text;
};SubClass = function() {// setText is already overridden, so this works as expectedBaseClass.call(this);
};
SubClass.prototype = new BaseClass();SubClass.prototype.setText = function(value) {BaseClass.prototype.setText.call(this, "SubClass says: " + value);
};var subClass = new SubClass();
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

如果您认为这不是问题，则取决于您是否可以不使用私有变量，并且是否有足够的经验在看到泄漏时知道泄漏。而且，必须将构造函数逻辑放在方法定义之后是不方便的。

var A = function (param1) {var privateVar = null; // Private variable// Calling this.setPrivateVar(param1) here would be an errorthis.setPrivateVar = function (value) {privateVar = value;console.log("setPrivateVar value set to: " + value);// param1 is still here, possible memory leakconsole.log("setPrivateVar has param1: " + param1);};// The constructor logic starts here possibly after// many lines of code that define methodsthis.setPrivateVar(param1); // This is valid
};var a = new A(0);
// setPrivateVar value set to: 0
// setPrivateVar has param1: 0a.setPrivateVar(1);
//setPrivateVar value set to: 1
//setPrivateVar has param1: 0

与：

var A = function (param1) {this.setPublicVar(param1); // This is valid
};
A.prototype.setPublicVar = function (value) {this.publicVar = value; // No private variable
};var a = new A(0);
a.setPublicVar(1);
console.log(a.publicVar); // 1

#2楼

有什么不同？ =>很多。

我认为， this版本用于启用封装，即数据隐藏。它有助于操纵私有变量。

让我们看下面的例子：

var AdultPerson = function() {var age;this.setAge = function(val) {// some housekeepingage = val >= 18 && val;};this.getAge = function() {return age;};this.isValid = function() {return !!age;};
};

现在， prototype结构可以应用如下：

不同的成年人有不同的年龄，但是所有成年人都享有相同的权利。
因此，我们使用原型而非它添加它。

AdultPerson.prototype.getRights = function() {// Should be validreturn this.isValid() && ['Booze', 'Drive'];
};

让我们现在来看一下实现。

var p1 = new AdultPerson;
p1.setAge(12); // ( age = false )
console.log(p1.getRights()); // false ( Kid alert! )
p1.setAge(19); // ( age = 19 )
console.log(p1.getRights()); // ['Booze', 'Drive'] ( Welcome AdultPerson )var p2 = new AdultPerson;
p2.setAge(45);
console.log(p2.getRights()); // The same getRights() method, *** not a new copy of it ***

希望这可以帮助。

#3楼

正如在其他答案中所讨论的那样，这实际上是性能方面的考虑，因为原型中的功能与所有实例共享-而不是为每个实例创建的功能。

我整理了一个jsperf来展示这一点。实例化类的时间有很大的不同，尽管实际上只有在创建多个实例时才有意义。

http://jsperf.com/functions-in-constructor-vs-prototype

#4楼

让我给您一个我在JavaScript培训课程中学到的更全面的答案。

大多数答案已经提到了差异，即在原型设计中，该功能已与所有（未来）实例共享。而在类中声明该函数将为每个实例创建一个副本。

通常，没有对与错，这取决于您的需求，取决于品味或设计决定。但是，原型是用于以面向对象的方式进行开发的技术，我希望您会在此答案的结尾看到。

您在问题中显示了两种模式。我将尝试再解释两个，并尝试解释差异（如果相关）。随意编辑/扩展。在所有示例中，它都是关于具有一定位置并可以移动的汽车对象的。

对象装饰器模式

不确定这种模式是否在当今仍然有用，但是它存在。很高兴知道这一点。您只需将一个对象和一个属性传递给装饰器函数。装饰器返回带有属性和方法的对象。

var carlike = function(obj, loc) {obj.loc = loc;obj.move = function() {obj.loc++;};return obj;
};var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

功能类别

JavaScript中的函数是专门的对象。除了被调用外，函数还可以像存储其他任何对象一样存储属性。

在这种情况下， Car是一个函数（也可以是object ），可以像您通常那样调用。它具有属性methods （具有move功能的对象）。当Car被调用extend函数被调用，其中做了一些魔法，并延长了Car功能（认为对象）与内定义的方法methods 。

该示例尽管有所不同，但与问题中的第一个示例最接近。

var Car = function(loc) {var obj = {loc: loc};extend(obj, Car.methods);return obj;
};Car.methods = {move : function() {this.loc++;}
};var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

原型类

前两种模式允许讨论使用技术定义共享方法或使用在构造函数主体中内联定义的方法。在这两种情况下，每个实例都有其自己的move功能。

原型模式不太适合进行相同的检查，因为通过原型委托进行功能共享是原型模式的真正目标。正如其他人指出的那样，它有望具有更好的内存占用空间。

但是，有一点有趣的知识是：每个prototype对象都有一个便利属性constructor ，该constructor函数指向它所附加的函数（认为对象）。

关于最后三行：

在此示例中， Car链接到prototype对象，该prototype对象通过constructor链接到Car本身，即Car.prototype.constructor是Car本身。这使您可以确定哪个构造函数构造了某个对象。

amy.constructor的查找失败，因此被委托给Car.prototype ，后者确实具有Constructor属性。因此， amy.constructor是Car 。

此外， amy是Car的instanceof 。 instanceof运算符通过查看是否可以在左操作数的原型（ amy ）链中的任何位置找到右操作数的原型对象（ Car ）来工作。

var Car = function(loc) {var obj = Object.create(Car.prototype);obj.loc = loc;return obj;
};Car.prototype.move = function() {this.loc++;
};var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();console.log(Car.prototype.constructor);
console.log(amy.constructor);
console.log(amy instanceof Car);

一开始，有些开发人员可能会感到困惑。请参见以下示例：

var Dog = function() {return {legs: 4, bark: alert};
};var fido = Dog();
console.log(fido instanceof Dog);

instanceof运算符返回false ，因为在fido的原型链中的任何地方都找不到Dog的原型。 fido是使用对象文字创建的简单对象，即它仅委托给Object.prototype 。

伪古典模式

这实际上只是原型模式的另一种简化形式，对于使用Java进行编程的人来说更熟悉，因为它使用了new构造函数。

实际上，它的功能与原型模式相同，只是原型模式之上的语法糖。

但是，主要区别在于JavaScript引擎中实现了一些优化，这些优化仅在使用伪经典模式时才适用。认为伪古典模式可能是原型模式的更快版本。两个示例中的对象关系相同。

var Car = function(loc) {this.loc = loc;
};Car.prototype.move = function() {this.loc++;
};var amy = new Car(1);
amy.move();
var ben = new Car(9);
ben.move();

最后，实现面向对象的程序设计应该不会太困难。有两个部分。

一节定义了原型（链）中的通用属性/方法。

在另一部分中，您放置了将对象彼此区分开的定义（示例中的loc变量）。

这就是我们可以在JavaScript中应用超类或子类之类的概念的原因。

随时添加或编辑。再完成一次，我可以使它成为社区Wiki。

#5楼

第一个示例仅更改该对象的接口。第二个示例更改该类所有对象的接口。

#6楼

在大多数情况下，它们基本上是相同的，但是第二种版本可以节省内存，因为该函数只有一个实例，而不是每个对象都有单独的函数。

使用第一种形式的原因是访问“私人成员”。例如：

var A = function () {var private_var = ...;this.x = function () {return private_var;};this.setX = function (new_x) {private_var = new_x;};
};

由于javascript的范围规则，private_var可用于分配给this.x的函数，但不适用于该对象。

#7楼

我相信@Matthew Crumley是正确的。它们在功能上 （如果不是在结构上）是等效的。如果您使用Firebug查看使用new创建的对象，则可以看到它们是相同的。但是，我的偏好如下。我猜想这似乎更像是我在C＃/ Java中所习惯的。即，定义类，定义字段，构造函数和方法。

var A = function() {};
A.prototype = {_instance_var: 0,initialize: function(v) { this._instance_var = v; },x: function() {  alert(this._instance_var); }
};

编辑并不是要暗示变量的范围是私有的，我只是想说明如何在javascript中定义类。变量名称已更改以反映这一点。

#8楼

这些示例具有截然不同的结果。

在查看差异之前，应注意以下几点：

构造函数的原型提供了一种通过实例的私有[[Prototype]]属性在实例之间共享方法和值的方法。
函数的此函数是通过调用函数的方式或通过使用bind设置的 （此处未讨论）。其中一个函数被调用的对象上（例如myObj.method()那么这该方法引用内的对象。如果这不是由电话或通过使用绑定的设置，则默认为全局对象（窗口浏览器），或者在严格模式下，仍然不确定。
JavaScript是一种面向对象的语言，即大多数值都是对象，包括函数。（字符串，数字和布尔值不是对象。）

因此，以下是这些片段：

var A = function () {this.x = function () {//do something};
};

在这种情况下，为变量A分配一个值，该值是对函数的引用。当该功能是使用称为A()函数的这不是由呼叫设定成默认为全局对象和表达this.x是有效window.x 。结果是将对右侧函数表达式的引用分配给window.x 。

如果是：

var A = function () { };
A.prototype.x = function () {//do something
};

发生了非常不同的事情。在第一行中，变量A被分配了对函数的引用。在JavaScript中，默认情况下，所有函数对象都具有prototype属性，因此没有单独的代码来创建A.prototype对象。

在第二行中，为A.prototype.x分配了对函数的引用。如果x属性不存在，则将创建一个x属性；如果不存在，则将分配一个新值。因此，与第一个示例（其中对象的x属性涉及表达式）的区别。

下面是另一个示例。它与第一个类似（也许您想问什么）：

var A = new function () {this.x = function () {//do something};
};

在此示例中，在函数表达式之前添加了new运算符，以便将该函数称为构造函数。当使用new调用时，函数的this设置为引用一个新的Object，该对象的private [[Prototype]]属性设置为引用构造函数的public 原型。因此，在赋值语句中，将在此新对象上创建x属性。当作为构造函数调用时，函数默认情况下返回其this对象，因此无需单独return this; 声明。

要检查A是否具有x属性：

console.log(A.x) // function () {//   //do something// };

这是new的不常见用法，因为引用构造函数的唯一方法是通过A.constructor 。这样做会更常见：

var A = function () {this.x = function () {//do something};
};
var a = new A();

获得类似结果的另一种方法是使用立即调用的函数表达式：

var A = (function () {this.x = function () {//do something};
}());

在这种情况下， A在右侧分配了调用函数的返回值。在这里，因为这不是在呼叫建立时，将引用全局对象和this.x是有效window.x 。由于该函数不返回任何内容，因此A的值将为undefined 。

如果要在JSON中对Javascript对象进行序列化和反序列化，则这两种方法之间的差异也很明显。序列化对象时，对象的原型上定义的方法不会序列化，例如，在您只想序列化对象的数据部分而不是序列化方法时，这会很方便：

var A = function () { this.objectsOwnProperties = "are serialized";
};
A.prototype.prototypeProperties = "are NOT serialized";
var instance = new A();
console.log(instance.prototypeProperties); // "are NOT serialized"
console.log(JSON.stringify(instance));
// {"objectsOwnProperties":"are serialized"}

相关问题 ：

JavaScript是一种原型语言，这意味着什么？
JavaScript中的函数范围是什么？
“ this”关键字如何工作？

旁注：两种方法之间可能不会节省大量内存，但是使用原型共享方法和属性可能会比每个拥有自己副本的实例使用更少的内存。

JavaScript不是一种低级语言。将原型或其他继承模式视为显式更改内存分配方式的一种方法可能没有什么价值。

#9楼

正如其他人所说的那样，使用“ this”会导致类A的每个实例都有其自己的函数方法“ x”的独立副本。而使用“原型”将意味着类A的每个实例将使用方法“ x”的相同副本。

这是一些代码来显示这种细微的差别：

// x is a method assigned to the object using "this"
var A = function () {this.x = function () { alert('A'); };
};
A.prototype.updateX = function( value ) {this.x = function() { alert( value ); }
};var a1 = new A();
var a2 = new A();
a1.x();  // Displays 'A'
a2.x();  // Also displays 'A'
a1.updateX('Z');
a1.x();  // Displays 'Z'
a2.x();  // Still displays 'A'// Here x is a method assigned to the object using "prototype"
var B = function () { };
B.prototype.x = function () { alert('B'); };B.prototype.updateX = function( value ) {B.prototype.x = function() { alert( value ); }
}var b1 = new B();
var b2 = new B();
b1.x();  // Displays 'B'
b2.x();  // Also displays 'B'
b1.updateX('Y');
b1.x();  // Displays 'Y'
b2.x();  // Also displays 'Y' because by using prototype we have changed it for all instances

正如其他人所提到的，出于多种原因选择一种或另一种方法。我的样本只是为了清楚地说明差异。

#10楼

原型是该类的模板；这适用于它的所有未来实例。而这是对象的特定实例。

#11楼

举两个例子：

var A = function() { this.hey = function() { alert('from A') } };

与

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

这里的大多数人（尤其是评分最高的答案）试图在不解释原因的情况下解释他们的不同之处。我认为这是错误的，如果您先了解基本知识，差异就会变得明显。让我们先解释一下基本原理...

a）函数是JavaScript中的对象。在JavaScript中的每个对象都得到一个内部属性（意味着，你不能访问它像其他属性，像Chrome浏览器，除了可能），通常被称为__proto__ （实际上你可以键入anyObject.__proto__在Chrome中，看看它的引用。仅仅是一个属性而已，JavaScript中的一个属性=对象中的一个变量，仅此而已，变量的作用是什么，它们指向事物。

那么这个__proto__属性指向什么呢？好吧，通常是另一个对象（稍后我们将解释原因）。强制__proto__属性的JavaScript不能指向另一个对象的唯一方法是使用var newObj = Object.create(null) 。即使执行此操作， __proto__属性STILL仍作为对象的属性存在，只是它没有指向另一个对象，而是指向null 。

这是大多数人感到困惑的地方：

当您在JavaScript中创建一个新函数时（它也是一个对象，还记得吗？），在定义它的那一刻，JavaScript会自动在该函数上创建一个称为prototype的新属性。试试吧：

var A = [];
A.prototype // undefined
A = function() {}
A.prototype // {} // got created when function() {} was defined

A.prototype与__proto__属性完全不同。在我们的示例中，“ A”现在具有两个称为“ prototype”和__proto__属性。这对人们来说是一个很大的困惑。 prototype属性和__proto__属性毫无关系，它们是指向不同值的独立事物。

您可能会想：为什么JavaScript在每个对象上都创建了__proto__属性？好吧，一个字：委派。当您在对象上调用属性而该对象没有属性时，JavaScript会查找__proto__引用的对象，以查看它是否具有该属性。如果没有它，它将查看该对象的__proto__属性，依此类推...直到链结束。因此命名原型链 。当然，如果__proto__没有指向对象，而是指向null ，这__proto__不走运，JavaScript会意识到这一点，并将为该属性返回undefined的内容。

您可能还想知道，为什么在定义函数时JavaScript会为函数创建一个称为prototype的属性？因为它试图欺骗您，所以可以欺骗您 ，它就像基于类的语言一样工作。

让我们继续我们的示例，并根据A创建一个“对象”：

var a1 = new A();

当事情发生时，背景中发生了一些事情。 a1是一个普通变量，被分配了一个新的空对象。

在函数调用A()之前使用new运算符的事实在后台做了一些附加操作。 new关键字创建了一个新对象，该对象现在引用a1且该对象为空。这是另外发生的事情：

我们说过，是否在每个函数定义上创建了一个称为prototype的新属性（可以访问它，而与__proto__属性不同）？好吧，该属性现在正在使用中。

因此，现在我们有了一个新烤的空a1对象。我们说过，JavaScript中的所有对象都具有内部__proto__属性，该属性指向某个内容（ a1也具有此属性），无论它为null还是另一个对象。 new操作符的作用是将__proto__属性设置为指向函数的prototype属性。再读一遍。基本上是这样的：

a1.__proto__ = A.prototype;

我们说过A.prototype只是一个空对象（除非在定义a1之前将其更改为其他对象）。所以现在基本上a1.__proto__指向同一件事A.prototype点，这是一个空的对象。它们都指向发生此行时创建的同一对象：

A = function() {} // JS: cool. let's also create A.prototype pointing to empty {}

现在，当处理var a1 = new A()语句时，发生了另一件事。基本上执行A() ，如果A是这样的：

var A = function() { this.hey = function() { alert('from A') } };

function() { }所有东西都将执行。当您到达this.hey..行时， this其更改为a1并得到以下信息：

a1.hey = function() { alert('from A') }

我不会介绍为什么将this更改为a1但这是了解更多信息的好答案。

综上所述，当您执行var a1 = new A()时，后台发生3件事：

将创建一个全新的空对象并将其分配给a1 。 a1 = {}
分配了a1.__proto__属性，使其指向与A.prototype指向的相同的东西（另一个空对象{}）
函数A()的执行与this设置为在步骤1中创建的新的空对象（请阅读我上面引用的答案，以了解为什么将this更改为a1 ）

现在，让我们尝试创建另一个对象：

var a2 = new A();

重复步骤1,2,3。你有注意到吗？关键字是重复。 第1步： a2将是一个新的空对象，第2步：其__proto__属性将指向A.prototype指向的同一事物，最重要的是，第3步：再次执行函数A() ，这意味着a2会变hey包含函数的属性。 a1和a2具有两个名为hey SEPARATE属性，它们指向2个SEPARATE函数！现在我们在相同的两个不同对象中做相同的事情，哎呀...如果我们用new A创建了1000个对象，那么在所有函数声明都比数字2占用更多的内存之后，您可以想象它的内存含义。那么，如何防止这种情况发生呢？

还记得为什么每个对象都存在__proto__属性吗？因此，如果您检索a1上的yoMan属性（不存在），将查询其__proto__属性，如果它是一个对象（在大多数情况下是），它将检查它是否包含yoMan ，以及是否包含yoMan 。否，它将参考该对象的__proto__等。如果是，它将获取该属性值并将其显示给您。

因此有人决定使用以下事实+当您创建a1 ，它的__proto__属性指向同一（空）对象A.prototype指向并执行以下操作：

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

凉！现在，当您创建a1 ，它将再次经历以上所有3个步骤，而在步骤3中，它不会执行任何操作，因为function A()无需执行任何操作。如果我们这样做：

a1.hey

它将看到a1不包含hey ，它将检查其__proto__属性对象，以查看是否具有该对象。

使用这种方法，我们从第3步中删除了在每次创建新对象时都复制了功能的部分。而不是a1和a2具有单独的hey属性，现在它们中没有一个拥有它。我想您到现在就知道了。太好了...如果您了解__proto__和Function.prototype ，类似这样的问题将非常明显。

注意：有些人倾向于不将内部Prototype属性称为__proto__ ，我在帖子中使用了此名称，以将其与Functional.prototype属性清楚地区分为两个不同的东西。

#12楼

每个对象都链接到原型对象。当尝试访问不存在的属性时，JavaScript将在对象的原型对象中查找该属性，如果存在则返回它。

函数构造函数的prototype属性指的是使用new时通过该函数创建的所有实例的原型对象。

在第一个示例中，您正在向使用A函数创建的每个实例添加属性x 。

var A = function () {this.x = function () {//do something};
};var a = new A();    // constructor function gets executed// newly created object gets an 'x' property// which is a function
a.x();              // and can be called like this

在第二个示例中，您正在向原型对象添加一个属性，所有使用A创建的实例都指向该属性。

var A = function () { };
A.prototype.x = function () {//do something
};var a = new A();    // constructor function gets executed// which does nothing in this examplea.x();              // you are trying to access the 'x' property of an instance of 'A'// which does not exist// so JavaScript looks for that property in the prototype object// that was defined using the 'prototype' property of the constructor

总之，在第一个示例中，该函数的副本已分配给每个实例 。在第二个示例中，所有实例共享该函数的单个副本 。

#13楼

我知道这已经死了，但我想展示一个实际的速度差异示例。

在这里，我们正在使用Chrome中的print方法创建2,000,000个新对象。我们将每个对象存储在一个数组中。在原型上print大约需要1/2倍的时间。

#14楼

考虑一下静态类型的语言， prototype上的东西是静态的，而this上的东西是实例相关的。

在JavaScript中使用“原型”还是“ this”？相关推荐

JavaScript中的原型(prototype)与继承
在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象每当我们创建了一个函数后,这个函数就拥有了一个protot ...
理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
理解原型设计模式以及JavaScript中的原型规则
原型规则原型规则所有的引用类型(数组.对象.函数),都具有对象特征,即可自由扩展属性: var arr = []; arr.a =1; 所有的引用类型都有对象的特性,即可自由扩展所有的引用类型都 ...
js实现html模板继承,理解JavaScript中的原型和继承
本文主要讲了原型如何在JavaScript中工作,以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法:以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值. 介绍 ...
JavaScript中的原型和对象机制
1 对象相关的一些语言特性 1.1 一切皆为对象 JavaScript里所有的东西都是对象. 对象是属性的集合. 数字, 字符串, 布尔值等原始值是"伪对象", 它们同样拥有属性, ...
javascript原型_在JavaScript中冻结原型时会发生什么
javascript原型 Have you wondered what happens when you freeze the prototype of an object? Let's find o ...
说一说JavaScript 中的原型ProtoType
一时兴起,写一遍博客吧. "函数是函数,函数也是对象" 相信学过js 的同学看到这句话很熟悉.我表示耳朵都听出茧子了. 我们都知道,在JavaScript中是没有类的概念的,那么怎 ...

在JavaScript中使用“原型”还是“ this”？

#1楼

#2楼

#3楼

#4楼