this.function和prototype.function有什么区别?

时间:2013-03-27 12:42:16

标签: javascript prototypal-inheritance

鉴于简单的JS继承,这两个例子之间的基函数的实际区别是什么?换句话说,一个人什么时候应该选择在“this”上而不是在原型上(或者相反的方式)定义一个函数?

对我来说,第二个例子更容易理解,但还有更多的内容吗?

在此定义的函数:

//base
var _base = function () {
    this.baseFunction = function () {
        console.log("Hello from base function");
    }
};
//inherit from base
function _ctor() {
    this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);

在原型上定义的函数:

//base
var _base = function () {};
_base.prototype.baseFunction = function () {
    console.log("Hello from base function");
}
//inherit from base
function _ctor() {
    this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);

1 个答案:

答案 0 :(得分:35)

原型上的函数只创建一次并在每个实例之间共享。在构造函数中创建的函数将作为使用构造函数创建的每个新对象的新对象创建。

作为一般规则,函数应该在原型上,因为它们通常不会针对相同类型的不同对象进行修改,并且这具有轻微的内存/性能优势。除非要创建共享的静态属性,否则应在构造函数中定义对象和数组等其他属性,在这种情况下,您应该使用原型。

更容易看到与普通对象或数组的区别而不是函数

function Foo(){
    this.bar = [];
}
var fooObj1 = new Foo();
var fooObj2 = new Foo();

fooObj1.bar.push("x");
alert(fooObj2.bar) //[]

而不是:

function Foo(){
}

Foo.prototype.bar = []
var fooObj1 = new Foo();
var fooObj2 = new Foo();

fooObj1.bar.push("x");
alert(fooObj2.bar) //["x"]