Javascript 构造函数:访问外部变量

Javascript constructor: Accessing outside variable

我尝试访问一个全局对象;这是一种预设。

var perks = {health: 100, attack: 10};

var player = function(hp) {
   this.stats = perks;

   //Changing some standard values..
   this.stats["health"] = hp; 
}

var Peter = new player(200);
var Steven = new player(300);

希望你明白我的意思;问题是,它不能正常工作,我什至不确定它做错了什么。如果我创建了多个玩家,例如史蒂文、科林和詹姆斯,每个球员都有相同的特权。在这个例子中,彼得和史蒂文都有 300 生命值。

如果我换行

this.stats = perks;

this.stats = {health: 100, attack: 10};

一切正常。彼得和史蒂文都有自己的统计数据。 如何访问全局 var perks?

当你写 this.stats = perks; 时,它们都指的是同一个 object,即 {health: 100, attack: 10}。所以对其中任何一个所做的任何更改都会影响另一个。

因为 var Steven = new player(300); 是您分配的最后一个值。您的所有玩家现在将拥有 {health: 300, attack: 10}

发生这种情况是因为在 JavaScript 中对象不会以这种方式复制,这就是为什么所有玩家都使用相同的 perks 对象。 有几种方法可以解决:

  1. 使用函数(对象自己的构造函数)创建新对象。

    function createPerks() {
        return {
            health: 100,
            attack: 10
        };
    }
    
    var player = function(hp) {
        this.stats = createPerks();
    
        //Changing some standard values..
        this.stats["health"] = hp; 
    }
    
    var Peter = new player(200);
    var Steven = new player(300);
    
  2. 每次创建新对象并使用常量作为默认值:

    var BASE_HEALTH = 100;
    var BASE_ATTACK = 10;
    
    var player = function(hp) {
        this.stats = {
            health: BASE_HEALTH,
            attack: BASE_ATTACK
        };
    
        //Changing some standard values..
        this.stats["health"] = hp; 
    }
    
    var Peter = new player(200);
    var Steven = new player(300);
    
  3. 使用Object.create(适用于 IE9+,但适用于旧版浏览器):

    var perks = {health: 100, attack: 10};
    
    var player = function(hp) {
        this.stats = Object.create(perks);
    
        //Changing some standard values..
        this.stats["health"] = hp; 
    }
    
    var Peter = new player(200);
    var Steven = new player(300);
    

    请记住,Object.create 不会克隆一个对象,而是从一个对象继承另一个对象。

    Object.create 用于旧浏览器的填充程序 Douglas Crockford:

    if (typeof Object.create !== 'function') {
        Object.create = function (o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }