javascript - Javascript - this.foo 和 this.prototype.foo 之间有区别吗

Question

这之间有什么区别：

function Foo(){
    this.bar = function(){
        console.log('hello');
    }
}
fooObj = new Foo();

和这个？

function Foo(){

}

Foo.prototype.bar = function(){
    console.log('hello');
}
fooObj = new Foo();

这些似乎表现相同，但我还没有完全了解原型。只是foo.prototype在类之外声明方法的一种方式吗？

score 7 · Accepted Answer

第一个示例为使用该构造函数创建的每个新对象创建一个新函数对象并将其分配给属性，第二个示例创建每个新对象引用的单个函数。

这意味着例如对于您的第一个示例

var fooObj1 = new Foo();
var fooObj2 = new Foo();

alert(fooObj1.bar === fooObj2.bar) //false

而对于第二个

alert(fooObj1.bar === fooObj2.bar) //true

这是因为在第一个示例中，条形属性指的是 2 个单独但相同的对象，而在第二个示例中它们是相同的。

一般而言，建议应在原型上声明函数以保留内存，而应单独声明其他对象，除非您要声明在使用该构造函数创建的所有对象之间共享的“静态”对象。

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

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"]

score 3 · Accepted Answer

基本上，区别在于：

....
this.bar = function(){
        console.log('hello');
    }
....

意味着Foo“类”的每个实例都有自己的bar.

....
Foo.prototype.bar = function(){
    console.log('hello');
}
....

意味着Foo“类”的所有实例将共享一个bar。某种静态属性。

score -1 · Accepted Answer

第一个示例中的 bar 方法不会从继承自 foo 的构造函数中继承。此外，在第一个示例中，由 foo 创建的对象将拥有自己唯一的 bar 副本，而在第二个示例中，它们共享相同的 bar 副本。

当一个对象由构造函数创建时，它会获得一个名为“ proto ”的属性，该属性指向构造函数的原型属性。“ proto ”是 JavaScript 中的一个特殊属性，它使对象继承它所指向的原型对象的所有属性。

3 回答 3