If a variable is enclosed, and an instance sets a property with the same name, where does the property go?

问题

Most of us know that JavaScript has no sense of "private" properties, but that behavior can be emulated through the use of closures:

var Car = function () {
    var name = 'Tesla';
    var wheelCount = 4;

    this.getName = function () {
        return name;
    };
    this.getWheelCount = function () {
        return wheelCount;
    };
    this.setName = function (newName) {
        name = newName;
    };
    this.setWheelCount = function (newCount) {
        wheelCount = newCount;
    };
};

var myCar = new Car();
console.log(myCar.name); // undefined

That all makes sense to us that know about how JavaScript closures work. However, the following will work:

myCar.name = 'Corvette';
console.log(myCar.name); // 'Corvette'

But then if you call the function from the prototype, the enclosed variable is still used

console.log(myCar.getName()); // 'Tesla'

When you call myCar.name, you're adding a new property to the object. Is it just the entire point of using this when declaring the getName (etc) functions inside the Car definition to make the differentiation between the enclosed name inside the Car declaration versus the myCar.name?

I have a feeling that I know the answer to this, but I would like to be certain. Plus, I think this would be something invaluable to other people getting an advanced grasp on how JavaScript enclosures work.

回答1:

Is it just the entire point of using this when declaring the getName (etc) functions inside the Car definition to make the differentiation between the enclosed name inside the Car declaration versus the myCar.name?

Yes.

this (or myCar) is the object, on which you put the properties that you want to have it (in this case all those methods). If you want to use properties, you must use a property accessor.

var name is just a local variable in the constructor function, which is accessed by closure from the object's methods.

Or, to answer your title question:

If a variable is enclosed, and an instance sets a property with the same name, where does the property go?

The property goes on the object. It doesn't interfere at all with the variable, which is located in the scope of the Car constructor invocation.

回答2:

In your example car function is a constructor function. When a constructor function is called with new operator, a new object is created and "this" gets bound to that new object. And "this" is returned from the function even if there is no return statement (unlike non-constructor functions that returns undefined if nothing is returned)

So When you called new Car() a new object got created and as "this" was bounded to this new object, the new object got 4 functions that you defined in Car function (getName, getWheelCount, setName, setWheelCount)

The name variable defined in Car function is not bounded to "this", it is bounded to Car's function scope. When car function returned "this", because of closure getName() still has access to function's name variable.

Now when you tried myCar.name, as the new object that was created does not have any variable called name, it printed undefined.

On doing myCar.name = 'Corvette', as no property named name was found in myCar,new property was created with name "name" and value "Corvette" (javascript creates a new property if it is not already existing in case of write operations, for read operations prototype chain is followed)

But surprisingly myCar.getName() still prints "Tesla" and not Corvette, because though the variable names are same they are in diffrent scope.The one that is referred by getName was part of Car function scope and is bounded to getName via Closure, but the name ("corvette") that you added belongs to new object that you created.

The purpose of "this" is to add the functions/variables defined inside constructor function to the object that you are going to create through that constructor function.

Hope it helps.

来源：https://stackoverflow.com/questions/25365855/if-a-variable-is-enclosed-and-an-instance-sets-a-property-with-the-same-name-w