两者之间有什么区别

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

and

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

当前回答

这些例子有非常不同的结果。

在研究差异之前,应注意以下几点:

构造函数的原型提供了一种通过实例的私有[[prototype]]属性在实例之间共享方法和值的方法。函数的this是通过函数的调用方式或使用bind(此处未讨论)来设置的。如果在对象上调用函数(例如myObj.method()),则方法中的函数将引用该对象。如果这不是通过调用或使用bind设置的,则默认为全局对象(浏览器中的窗口)或严格模式,保持未定义。JavaScript是一种面向对象的语言,即大多数值都是对象,包括函数。(字符串、数字和布尔值不是对象。)

以下是有问题的片段:

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

在这种情况下,变量A被分配了一个引用函数的值。当使用A()调用该函数时,函数的this不会被调用设置,因此它默认为全局对象,表达式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调用时,函数的this被设置为引用一个新Object,该Object的私有[[Prototype]]属性被设置为参考构造函数的公共原型。因此,在赋值语句中,将在这个新对象上创建x属性。当作为构造函数调用时,函数默认返回其this对象,因此不需要单独返回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指定了调用右侧函数的返回值。在这里,由于在调用中未设置此项,因此它将引用全局对象,而此.x是有效的window.x。由于函数不返回任何内容,因此A的值将为undefined。

如果要将Javascript对象序列化为JSON或从JSON反序列化,这两种方法之间的差异也会很明显。序列化对象时,对象原型上定义的方法不会被序列化,例如,如果您只想序列化对象的数据部分,而不想序列化其方法,这会很方便:

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”关键字是如何工作的?

Sidenote:这两种方法之间可能没有任何显著的内存节省,但是使用原型共享方法和财产可能比每个拥有自己副本的实例使用更少的内存。

JavaScript不是低级语言。将原型设计或其他继承模式视为显式改变内存分配方式的一种方式可能不是很有价值。

其他回答

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

大多数答案已经提到了这一点,即当原型化时,功能与所有(未来)实例共享。而在类中声明函数将为每个实例创建一个副本。

总的来说,没有对错之分,更多的是品味或设计决定,取决于您的需求。然而,原型是用于以面向对象的方式进行开发的技术,我希望您会在答案的结尾看到。

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

对象装饰器图案

不确定这种模式现在是否仍然适用,但它确实存在。知道这一点很好。您只需将对象和属性传递给decorator函数。装饰器返回带有属性和方法的对象。

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是一个函数(也称为对象),可以按照您的习惯进行调用。它有一个属性方法(这是一个带有移动函数的对象)。当调用Car时,会调用extend函数,这会产生一些魔力,并使用方法中定义的方法扩展Car函数(think对象)。

这个例子虽然不同,但最接近问题中的第一个例子。

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();

原型类

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

原型模式不适合同样的检查,因为通过原型委托共享功能是原型模式的目标。正如其他人所指出的,预计它的内存占用量会更好。

然而,有一点值得注意:每个原型对象都有一个方便的属性构造函数,它指向它所附加的函数(think对象)。

关于最后三行:

在本例中,Car链接到原型对象,该对象通过构造函数链接到Car本身,即Car.prototype.constructor是Car本身。这允许您确定哪个构造函数构建了某个对象。

amy.constructor的查找失败,因此被委托给Car.prototype,它确实具有构造函数属性。所以我的结构是Car。

此外,amy是Car的一个例子。instanceof运算符的工作方式是查看右操作数的原型对象(Car)是否可以在左操作数的模型(amy)链中的任何位置找到。

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编程的人来说更为熟悉,因为它使用了新的构造函数。

它确实和原型模式一样,它只是原型模式的句法糖份。

然而,主要区别在于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中应用超类或子类等概念的原因。

可以随意添加或编辑。一旦完成,我可能会把它变成一个社区维基。

正如其他答案中所讨论的,这确实是一个性能考虑因素,因为原型中的函数与所有实例化共享,而不是为每个实例化创建的函数。

我制作了一个jsperf来展示这一点。实例化类所需的时间有着巨大的差异,尽管只有在创建许多实例时,它才真正相关。

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

有什么区别?=>很多。

我认为,这个版本用于实现封装,即数据隐藏。它有助于处理私有变量。

让我们看一下以下示例:

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 ***

希望这有帮助。

使用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' method
    BaseClass.call(this);

    // Keeping a reference to the superclass' method
    var super_setText = this.setText;
    // Overriding
    this.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 expected
    BaseClass.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 error

    this.setPrivateVar = function (value) {
        privateVar = value;
        console.log("setPrivateVar value set to: " + value);

        // param1 is still here, possible memory leak
        console.log("setPrivateVar has param1: " + param1);
    };

    // The constructor logic starts here possibly after
    // many lines of code that define methods

    this.setPrivateVar(param1); // This is valid
};

var a = new A(0);
// setPrivateVar value set to: 0
// setPrivateVar has param1: 0

a.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

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