JavaScript 自调用函数属性

Question

试图更好地理解 JS，有几个澄清。 让我们假设我们有以下方法

var customer = function(){
            var name = "Contoso";
            return {
                getName : function(){
                    return this.name;
                },
                setName : function(newName){
                    this.name = newName;
                }
            }
        }();

为什么名称在外部不可见？，当我们记录 (customer.name) 其未定义时，但是如果我们删除函数上的自初始化括号并将变量声明更改为 (this.name) & 再次登录时我们可以看价值。 我在这里错过了什么。

Answer 1

您需要考虑到 JavaScript 并没有真正的本机类。 话虽如此，您可以创建构造函数以“模仿”一个类并能够使用this您需要创建如下内容：

function fnc (string) {
  this.string = string; 
}

fnc.prototype.getString = function() {
  return this.string;
}

var x = new fnc('bar');
console.log(x.getString()); //bar

这称为构造函数模式。 您要做的是使用称为模块模式的东西，它的工作原理如下：

var fn = (function() {
  var string = 'foo';
  return {
    getString() {
      return string;
    }
  }
})();

console.log(fn.getString()); //foo

这是一个工作示例： https : //repl.it/FCn7

另外，请阅读： https : //addyosmani.com/resources/essentialjsdesignpatterns/book/

使用带有模块模式的getString和setString编辑示例

var fn = (function() {
  var string = 'foo';
  return {
    getString() {
      return string;
    },
    setString(str){
      string = str;
    }
  }
})();

fn.setString('xyz');
console.log(fn.getString()); // xyz

Answer 2

var正在函数作用域内创建变量，该变量在函数属性之外不可用。 如果你想访问像customer.name这样的属性，你需要像你注意到的那样将它初始化为this.name 。

这个例子中的var就像创建可以被函数修改的私有变量，但不能直接修改。

所以这会起作用：

var customer = function(){
    var name = "Contoso";
    return {
        getName : function(){
            return name;
        },
        setName : function(newName){
            name = newName;
        }
    }
}();