两者之间有什么区别
var A = function () {
this.x = function () {
//do something
};
};
and
var A = function () { };
A.prototype.x = function () {
//do something
};
两者之间有什么区别
var A = function () {
this.x = function () {
//do something
};
};
and
var A = function () { };
A.prototype.x = function () {
//do something
};
当前回答
我相信马修·克鲁姆利是对的。它们在功能上(如果不是结构上)是等效的。如果使用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); }
};
EDIT并不意味着变量的范围是私有的,我只是想说明如何用javascript定义类。变量名称已更改以反映这一点。
其他回答
我相信马修·克鲁姆利是对的。它们在功能上(如果不是结构上)是等效的。如果使用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); }
};
EDIT并不意味着变量的范围是私有的,我只是想说明如何用javascript定义类。变量名称已更改以反映这一点。
有什么区别?=>很多。
我认为,这个版本用于实现封装,即数据隐藏。它有助于处理私有变量。
让我们看一下以下示例:
var AdultPerson = function() {
var age;
this.setAge = function(val) {
// some housekeeping
age = val >= 18 && val;
};
this.getAge = function() {
return age;
};
this.isValid = function() {
return !!age;
};
};
现在,原型结构可以应用如下:
不同的成年人有不同的年龄,但所有成年人都享有相同的权利。所以,我们使用原型而不是这个添加它。
AdultPerson.prototype.getRights = function() {
// Should be valid
return 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 ***
希望这有帮助。
每个对象都链接到原型对象。当试图访问不存在的属性时,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 example
a.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
总之,在第一个示例中,函数的副本被分配给每个实例。在第二个示例中,所有实例共享函数的单个副本。
在大多数情况下,它们本质上是相同的,但第二个版本节省了内存,因为只有一个函数实例,而不是每个对象都有一个单独的函数。
使用第一个表单的原因是访问“私人成员”。例如:
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的函数,但不能在对象外部使用。
正如其他人在第一个版本中所说的那样,使用“this”会导致类A的每个实例都有自己的函数方法“x”的独立副本。而使用“prototype”将意味着类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
正如其他人所提到的,选择一种或另一种方法有多种原因。我的样本只是为了清楚地展示差异。