如何引用 JavaScript 函数内的不同位置

Question

我正在尝试从 JavaScript 中的其他功能访问设置和 values/functions，并且相信可能有一个我遗漏的简单规则。这是一个非常简化的代码示例：

function h(){
    // example settings I want to declare for h()
    this.settings = {
        critical: 400,
        readCritical: function(){
            return this.settings.critical; // /!\ but this does not work
        }
    }
    this.hsub = function(){
        return this.settings.critical; // /!\ this does not work either
    }

}
var x = new h();
console.log(x.settings.critical); // This works fine
console.log(x.settings.readCritical()); // I can *call* this fine, but it can't read outside itself
console.log(x.hsub()); // I can also call this but same problem
console.log(h.settings); // `undefined`; I understand I can't see directly into the function

您可以看到 this.settings.critical 值，我试图从各自的函数 readCritical 和 hsub 中访问它。我怎样才能做到这一点？具体来自实例化的 x.

也是一个次要问题，但相关，我更愿意声明 var settings = {} 而不是 this.settings。这是可能的还是更可取的？

Answer 1

啊哈，又一个经典的闭包问题

有两种方法可以解决：

function h(){
    var self = this;
    this.settings = {
        critical: 400;
        readCritical: function() {
            return self.settings.critical();    // otherwise this.settings will 'cover' `this`.
        }
   }
}

readCritical: () => this.settings.critical();    // arrow functions won't form a function scope

Answer 2

您唯一需要做的更改是从 readCritical 函数中删除 .settings。

hsub 按原样工作。不确定您为什么认为存在问题

function h(){
    this.settings = {
        critical: 400,
        readCritical: function(){
            return this.critical; // reference `critical` directly
        }
    }
    this.hsub = function(){
        return this.settings.critical; // this works just fine
    }

}

var x = new h();

console.log(x.settings.critical);       // 400
console.log(x.settings.readCritical()); // 400
console.log(x.hsub());                  // 400

// This is expected to be `undefined`
console.log(h.settings);

Answer 3

this 的作用域（以及设置它的绑定函数）是 JS 中讨论最多的话题。但是，您似乎不是专门寻找 this ，而是共享变量，还有另一种选择。总而言之，没有最佳答案，但由于您还想声明 var settings = {}: 您实际上可以并且有权访问其他函数中可用的局部变量。

function h(){        
    var settings = { //var settings is a local variable of the function h (or instance of it). If ES6 is allowed 'let' or 'const' are preferrable
        critical: 400,
        readCritical: function(){
            return settings.critical;
        }
    };
    this.settings = settings; //this.settings is not the same variable as var settings, making this statement valid
    this.hsub = function(){
        return settings.critical; //the local (var) settings is used
    }
}

var x = new h();
console.log(x.settings.critical); 
console.log(x.settings.readCritical()); 
console.log(x.hsub());

这里的陷阱是，如果调用代码将 x.settings 更改为其他内容，变量将不会指向同一个实例（如果它们更改 x.settings 中的值，一切都很好） .如果这是一个风险，它可以作为属性方法公开，而不是

Answer 4

看来您只想拥有一个实例。如果是这样，那么只需立即使用对象文字符号创建实例：

var h = {
    settings: {
        critical: 400,
        readCritical: function(){
            return this.critical;
        }
    },
    hsub: function(){
        return this.settings.critical;
    }
}
console.log(h.settings.critical);
console.log(h.settings.readCritical());
console.log(h.hsub());
console.log(h.settings);

现在所有四个属性访问在给定单例对象 h 时都按预期工作。

如何引用 JavaScript 函数内的不同位置

How to reference different locations inside a JavaScript function

javascript

oop

encapsulation