javascript - 为什么prototype.setName和this.setName可以返回不同的值？

Question

这是我的代码。我很好奇 prototype.setName 和 this.setName 有什么不同。为什么当我调用 p2.setName() 时，我会得到相同的 p2 值？谢谢。

function Person(){
    var name = '';
}

Person.prototype.setName = function (value){
    name = value;
}   
Person.prototype.getName = function (){
    return name;
}

function Sprite(){
    var name = '';
    this.setName = function (value){
        name = value;
    }
    this.getName = function(){
        return name;
    }
}

var p1 = new Person();
p1.setName('p1');
var p2 = new Person();
p2.setName('p2');
console.log(p1.getName()) // p2
console.log(p2.getName()) // p2

var s1 = new Sprite('s1');
s1.setName('s1');
var s2 = new Sprite('s2');
s2.setName('s2');
console.log(s1.getName()); //s1
console.log(s2.getName()); //s2

Answer 1

原因是您在 Person() 中声明的 name 变量仅是该函数的本地变量，不与原型(prototype)函数共享。

因此，以下内容将创建一个名为 name 的新全局变量。

Person.prototype.setName = function (value){
   name = value;
}

由于该变量是全局变量，因此它由 p1 和 p2 共享(请注意，如果您添加 'use strict'; 以上导致异常而不是自动创建全局)。

您应该按照 @beautifulcoder 的建议进行操作，并使用 this 使变量成为对象的属性，如下所示

function Person(){
    this.name = '';
}

Person.prototype.setName = function (value){
    this.name = value;
};   
Person.prototype.getName = function (){
    return this.name;
};

最后，Sprite() 起作用的原因是因为 set 和 get 函数是在本地 name 变量的范围内定义的，因此它们创建一个闭包并使用本地 name 而不是创建全局变量。