Javascript 构造函数 : Accessing outside variable

Question

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

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？

Answer 1

发生这种情况是因为在 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();
       };
   }