使用带有 Getter/Setter 的构造函数初始化 JavaScript/ES5 对象

Question

The following constructor function is written in JavaScript / ES5 -

function Range(from, to) {

    function getFrom() { return from; }
    function getTo() { return to; }

    function setFrom(f) { from = f; }
    function setTo(t) { to = t; }

    Object.defineProperties(this, {
        fromProp: { get: getFrom, set: setFrom, enumerable: true, configurable: false },
        toProp: { get: getTo, set: setTo, enumerable: true, configurable: false }
    });
};

I create an object using this constructor as follows -

var range = new Range(4, 13);  

My general understanding of object creation is, there should be some code inside the constructor that, after instantiating the object range , will initialize fromProp and toProp with the values I passed through the parameters to the constructor. But I'm having hard time understanding how exactly that is happening here.

Or, is it that the whole "initializing/accessing property" things here are captured inside the closure of setter/getter invocation? But if so, then at any time when I use -

range.fromProp = 22;

the value 22 actually never gets set to the range object's property fromProp , but rather to the parameter variable from , and then whenever I ask for -

var fromValue = range.fromProp;

it just hands me over the current value of the parameter variable from . Am I getting this right, or missing something?

Any explanation on the matter?

Answer 1

function Range(from, to) {

function getFrom() { return from; }
function getTo() { return to; }

function setFrom(f) { from = f; }
function setTo(t) { to = t; }

Object.defineProperties(this, {
    fromProp: { get: getFrom, set: setFrom, enumerable: true, configurable: false },
    toProp: { get: getTo, set: setTo, enumerable: true, configurable: false }
});

};

Lets analyse here , you are setting the "get" property of "fromProp" as the reference of "getFrom" function where you are returning the value of "from" param and in the same way the "set" is referencing the function "setFrom" where the assignment of value to "from" is being done.

As the conclusion the get and set of fromProp is not directly holding the value rather it is holding the accessor function to return the value of "from".

Hope your doubt is clear now.

Answer 2

If you are from a Java/C# world, then this of course seems a bit odd at first look, because in those languages any values passed through the constructor parameters are typically used to initialize the object, ie saving the values as the object's internal state, which are usually represented with private fields. Then those private fields are exposed to the outside world via properties with getter/setter.

So, the getter/setter in those languages actually encapsulate the object's internal data, not the constructor parameters.

JavaScript on the other hand does not provide the ability to make it's object's state private.

That's why the values of the constructor parameters here have not been saved to any data properties, and rather, are captured in Closure of invocation of the accessor properties (as mentioned in the comments), to simulate the object's private state.