类内的 JavaScript 变量始终未定义

Question

我有一个这样的 JavaScript 类：

Dog = (function() {
    var name;

    function setName(_name) {
        name = _name;
    }

    return {
        setName: setName,
        name: name
    };
})();

当我跑步时：

Dog.setName('Hero');

Dog.name 始终未定义。

我当然遗漏了一些关于 JS 作用域的东西，但是什么？

Answer 1

您正在返回一个对象，其中name 属性在那个时间点（未定义）的值为name。当 IIFE 中的 name 变量更新时，返回对象的 name 属性不会以某种方式动态更新。

有很多方法可以处理您似乎想做的事情。这是一个：

Dog = (function() {
    var name;

    function setName(_name) {
        name = _name;
    }

    return Object.defineProperties({}, {
      setName: { value: setName },
      name:    { get: function() { return name; } }
    });

})();

这将name保持为私有变量，只能通过setName设置，但提供了一个getter属性来获取其值。

另一个答案中提出的替代方案是等效的，只是写法不同：

return {
  setName:  function(n) { name = n; },
  get name: function() { return name; }
};

次要问题，但在这种特殊情况下，您的 IIFE 不需要括号：

Dog = function() { }();

会正常工作。

Answer 2

发生这种情况是因为您假设在对象中设置 name 会保留对原始 name 变量的引用。相反，您希望将其分配给当前对象（您不妨完全忽略私有变量）。

Dog = {
  name: '',
  setName: function(n) {
    this.name = n;
  }
};

但是，如果您想保持 name 私有，那么您可以为它创建一个 getter。

var Dog = (function() {
  var name;

  return {
    setName: function(n) {
      name = n;
    },
    get name: function() {
      return name;
    }
  };
})();

Answer 3

解决这个问题的简单方法是：

Dog = (function() {

var dog = {
    setName: setName,
    name: name
};

function setName(_name) {
    dog.name = _name;
}

return dog;
}

在您的代码中，您设置了错误的 name 变量。

变量名;

function setName(_name) {
    name = _name;
}

在这个函数中，setName 设置的是内部变量name，而不是属性name。在 JavaScript 中，字符串是不可变的，因此当您更改它时，它会创建一个新字符串，并且不会更新现有字符串。

Answer 4

这对你来说可能是一个更好的模式。您正在使用非常古老的 ES3 风格的构造函数。

(function(exports) {

  function Dog(name) {
    this.name = name;
  }

  Dog.prototype.speak = function() {
    return "woof";
  };

  // other functions ...

  exports.Dog = Dog;
})(window);

var d = new Dog('Hero');
console.log(d.name); // "Hero"

你可能也想看看 ES6 类

class Dog {
  constructor(name) {
    this.name = name;
  }
}

let d = new Dog('Hero'); 
console.log(d.name); // "Hero"

Answer 5

听起来你想创建一个构造函数...检查这个示例：

function Dog(prop) {
        this.name = prop.name;
        this.color = prop.color;
    }
    var myDog = new Dog({
        name:'Sam',
        color: 'brown'
    });
    alert()
    console.log('my dog\'s name is: '+myDog.name);
    console.log('my dog\'s color is: '+myDog.color);

你可以在这里试试：http://jsfiddle.net/leojavier/ahs16jos/

我希望这对人有所帮助......

Answer 6

使用“this”关键字。

Dog = (function() {
    var name;

    function setName(_name) {
        this.name = _name;
    }

    return {
        setName: setName,
        name: name
    };
})();
Dog.setName('Hero');
alert(Dog.name);