javascript - 在 Javascript 中使用 .prototype 的原因

Question

使用 .prototype 而不是在对象本身内部声明函数和成员的技术原因是什么？用代码示例最容易解释。

使用有什么好处:

RobsObject = function(data){
    this.instanceID = data.instanceID;
    this._formButton = document.getElementById('formSubmit_' + this.instanceID);
    if(this._formButton)
    {
        //set a click listener that
        //points to this._onSubmit, this._onSuccess, and this.onFailure
    }
};

RobsObject.prototype = {
    _onSubmit: function(type, args)
    {
        //make an ajax call
    },

    _onSuccess: function(type, args)
    {
        //display data on the page
    },

    _onFailure: function(type, args)
    {
        //show an alert of some kind
    },
};

反对像这样在对象内部声明函数:

RobsObject = function(data){
    this.instanceID = data.instanceID;
    this._formButton = document.getElementById('formSubmit_' + this.instanceID);
    if(this._formButton)
    {
        //set a click listener that
        //points to this._onSubmit, this._onSuccess, and this.onFailure
    }

    this._onSubmit = function(type, args)
    {
        //make an ajax call
    }

    this._onSuccess = function(type, args)
    {
        //display data on the page
    }

    this._onFailure = function(type, args)
    {
        //show an alert of some kind
    }
};

谢谢。

编辑:正如你们中的许多人指出的那样，我在第二个代码片段中的函数应该在它们前面加上“this”以便公开。所以我添加了它。只是我的一个错误。

Answer 1

在构造函数的 prototype 中声明的所有内容都由该构造函数的所有实例共享。如果您在构造函数中定义函数，那么每个实例都会获得自己的函数副本，这会浪费内存(如果稍后比较两个实例之间的属性，可能会导致问题)。

此外，在您的示例中，构造函数中声明的函数对于函数范围是私有(private)的。它们不能作为实例的成员方法调用。为此，您需要将它们分配给对象的属性:

MyObject = functon() {
  // ...

  this.myMethod = function() {
    // ...
  };
}

Douglas Crockford 写了一篇关于原型(prototype)继承的好文章，绝对值得一读:Prototypical Inheritance in JavaScript .

更新:简要原型(prototype)总结

当您使用构造函数创建新对象时，函数的 prototype 属性的值被指定为新对象的 prototype 对象。 (是的，名称令人困惑!)这很像在基于类的语言中分配父类(super class)(但不完全是!阅读 Crockford 的页面!)

// MyObject constructor function:
MyObject = function() {
  this.a = 1;
}

// Define an object to use as a prototype.
var thePrototype = { b: 2 };

// Assign thePrototype as the prototype object for new instances of MyObject.
MyObject.prototype = thePrototype;

// Create an instance of MyObject.
var x = new MyObject();
// Everything in thePrototype is available to x.
console.log(x.b);

// x's prototype is a reference to thePrototype, so updating it affects x.
thePrototype.c = 3;
console.log(x.c);

// Setting properties on x always sets them *on x*, even if the property is
//  defined on the prototype:
x.b = 0;
y = new MyObject();
console.log(x.b);
console.log(y.b);