Javascript使变量成为每次被引用时都会自行调用的函数

Question

Hi I would like to know if it is possible to make a variable behave like this:

var someFlag  = true;
var someWidth = (()=>(someFlag) ? 16 : 12)();

console.log(someWidth) // 16

someFlag = false;

console.log(someWidth) // would be nice if it was 12
// right now it still prints 16

Is something like this possible? Also I know that someWidth could be a function, the idea is I have a lot of code I would need to refactor so I don't want to do someWidth();

Answer 1

Great way to describe object property is here

 var someFlag = true; Object.defineProperty(window, 'someWidth', { get:()=>someFlag ? 16 : 12 }) console.log(someWidth) // 16 someFlag = false; console.log(someWidth) // 12 

I dont think its good idea to have such global variables.You can try to create your own object maybe?

Answer 2

Short answer: Yes, but it's not recommended.

If a name does not belong to a local variable, then it is looked for as the name of a property of the global object - which on the browser is window . It is possible to use defineProperty on the window object to define a property with a getter function.

Object.defineProperty(window, 'test', {
    get: function () { return 3; },
});
var x = test; // x = 3

However this is absolutely not recommended, because there is only one global context. In the event that multiple separate JS modules define the same global variable, the definitions will clash and you will get crashes or some odd behavior.

Another thing you can do that's not recommended, is to use a with block, which would look like this:

var o = {};
Object.defineProperty(o, 'test', {
    get: function () { return 3; },
});
with (o) {
    var x = test; // x = 3
}

The with keyword takes one object as a parameter. Names inside the block are looked up first as properties of that object, then as local variables, then as properties of the global object. This is not recommended either, because it requires that all names to be looked for first as properties of the object, which slows down code.

with (o) {
    var test = 4;
    var x = test; // x = 3
}

Also, Javascript has lexical scoping, not dynamic scoping, so you can't just wrap the top-level entry point in a with block, the whole program would have to be written inside a with block.

var f = function () {
    return test;
};
with (o) {
    var x = f(); // reference error: test is not defined
}

Answer 3

I'm not sure if this would be a solution depending on what kind of refactoring you're looking at, but how about creating your own object with a modified getter/setter?

 var VariableWidth = { flag: true, get value() { return this.flag ? 16 : 12; }, set setFlag(p_bool) { this.flag = p_bool; } } console.log(VariableWidth.value) // 16 VariableWidth.setFlag = false; console.log(VariableWidth.value) // would be nice if it was 12 // right now it still prints 16