JavaScript关闭和作用域问题

Question

Could anyone explain to me the following code:

var person = (function () {
    var locX = 0;
    return {
        "walk": function () {
            locX++;
        },
        "getLocX": function () {
            return locX;
        },
        "locX": locX
    }
})();


person.locX // output 0

person.getLocX() // output 0

person.walk()

person.getLocX() // output 1

person.locX // output 0    <-------- why it is still 0

Answer 1

person.locX// output 0 <-------- why it is still 0

Because in the object initializer, this property initializer:

"locX" : locX

takes the value of locX and assigns it to a property on the object. It doesn't create a link between your locX variable and the property.

It's exactly like this:

var a, b;
a = 1;
b = a;
a = 2;
console.log(b); // 1, of course

Assigning a 's value to b didn't create any kind of link between a and b . It's exactly the same with an object property.

If you want to get the value of the variable locX , your getLocX function is exactly how you would do that.

If your goal is to be able to read locX from the object without explicitly calling a function, but have that value come from your variable, in ES5 onward you could use a getter function for that:

 var person = (function() { var locX = 0; return { walk: function() { locX++; }, get locX () { return locX; } }; })(); snippet.log(person.locX); // 0 person.walk(); snippet.log(person.locX); // 1 

 <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

It's important to realize that using a getter function means that person.locX is a hidden function call.

Answer 2

person.locX// output 0 <-------- why it is still 0

Problem is here,

"locX" : locX

Unlike getLocX , only the value 0 was copied at the time of return statement and not the reference of locX .

Answer 3

Because changing the value of locX variable will not update the value of the property, they are not linked together.

A possible solution is to use Object.defineProperty() as below, so that we can return the value of the local variable whenever the value of the locX property is requested.

 var person = (function() { var locX = 0; var obj = { "walk": function() { locX++; }, "getLocX": function() { return locX; } } Object.defineProperty(obj, 'locX', { enumerable: true, get: function() { return locX } }); return obj; })(); snippet.log('locX: ' + person.locX); snippet.log('getLocX: ' + person.getLocX()); person.walk(); snippet.log('walk') snippet.log('locX: ' + person.locX); snippet.log('getLocX: ' + person.getLocX()); 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

---

Or as TJ said using getter

 var person = (function() { var locX = 0; return { "walk": function() { locX++; }, "getLocX": function() { return locX; }, get locX() { return locX; } }; })(); snippet.log('locX: ' + person.locX); snippet.log('getLocX: ' + person.getLocX()); person.walk(); snippet.log('walk') snippet.log('locX: ' + person.locX); snippet.log('getLocX: ' + person.getLocX()); 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>