Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Object.assign getters and setters in constructor

Tags:

javascript

I try to define getter and setter in constructor via Object.assign:

function Class() {
  Object.assign(this, {
    get prop() { console.log('call get') },
    set prop(v) { console.log('call set') },
  });
}

var c = new Class(); // (1) => 'call get'
console.log(c.prop); // (2) => undefined
c.prop = 'change';
console.log(c.prop); // (3) => 'change' 

Questions:

(1) Why getter is called?

(2) Why getter isn't called?

(3) Why setter is ignored?

like image 630
mqklin Avatar asked Oct 24 '16 06:10

mqklin


People also ask

Should I use getters and setters in constructor?

You should not call getters and setters from the constructor. A constructor constructs the specific class in which it is defined. It is its job to initialise the fields because - well - nothing else will. The only way to guarantee initialising the fields is to assign them.

Does object assign use setters?

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters.

Does object assign do a deep copy?

Object. assign does not copy prototype properties and methods. This method does not create a deep copy of Source Object, it makes a shallow copy of the data. For the properties containing reference or complex data, the reference is copied to the destination object, instead of creating a separate object.

Does object assign create a new object?

The Object. assign() invokes the getters on the source objects and setters on the target. It assigns properties only, not copying or defining new properties.


1 Answers

The answer to all three of your questions is the same: Object.assign reads the value of the property from the source object, it doesn't copy getters/setters.

You can see that if you look at the property descriptor:

var source = {
  get prop() { },
  set prop(v) { }
};
console.log("descriptor on source", Object.getOwnPropertyDescriptor(source, "prop"));
var target = Object.assign({}, source);
console.log("descriptor on target", Object.getOwnPropertyDescriptor(target, "prop"));

To define that property on this inside Class, use defineProperty:

function Class() {
  Object.defineProperty(this, "prop", {
    get() { console.log('call get') },
    set(v) { console.log('call set') },
  });
}
var c = new Class();
console.log(c.prop); // => 'call get', undefined
c.prop = 'change'; // => 'call set'
console.log(c.prop); // => 'call get', undefined
like image 76
T.J. Crowder Avatar answered Oct 21 '22 03:10

T.J. Crowder