I'm having a hard time understanding why there are some issues with the following code /

Note: All examples are tested in chrome version 52.0.2743.116 just in case this helps

const model = {
  someVal: 'some val',
};


const obs = {
  ...model,
  get accessor() {
    return this.someVal;
  },
}

// Expected: '>>> some val'
// Actual: '>>> undefined'
console.log('>>>', obs.accessor);

But the following similar snippet works /

const model = {
  someVal: 'some val',
};


const obs = {
  get accessor() {
    return this.someVal;
  },
  ...model,
}

// Expected: '>>> some val'
// Actual: '>>> some val'
console.log('>>>', obs.accessor);

using the babel REPL I was able to see that Object.assign is used if available in the transpiled code When I used it directly instead of the object spread I get the same issue, and also works if put the model variable to the end instead of at the beginning.

Is this a bug? or is it intended behavior?

Also why does the following snippet work as well?:

const model = {
  someVal: 'some val',
};


const obs = {
  someVal: model.someVal,
  get accessor() {
    return this.someVal;
  },
}

// Expected: '>>> some val'
// Actual: '>>> some val'
console.log('>>>', obs.accessor);

/

I would expect it to have the same issues but works as a charm are getters this keyword somehow bound to the object they were added to?

I'm having a hard time understanding why there are some issues with the following code https://jsfiddle/q4w6e3n3/3/

Note: All examples are tested in chrome version 52.0.2743.116 just in case this helps

const model = {
  someVal: 'some val',
};


const obs = {
  ...model,
  get accessor() {
    return this.someVal;
  },
}

// Expected: '>>> some val'
// Actual: '>>> undefined'
console.log('>>>', obs.accessor);

But the following similar snippet works https://jsfiddle/q4w6e3n3/5/

const model = {
  someVal: 'some val',
};


const obs = {
  get accessor() {
    return this.someVal;
  },
  ...model,
}

// Expected: '>>> some val'
// Actual: '>>> some val'
console.log('>>>', obs.accessor);

using the babel REPL I was able to see that Object.assign is used if available in the transpiled code When I used it directly instead of the object spread I get the same issue, and also works if put the model variable to the end instead of at the beginning.

Is this a bug? or is it intended behavior?

Also why does the following snippet work as well?:

const model = {
  someVal: 'some val',
};


const obs = {
  someVal: model.someVal,
  get accessor() {
    return this.someVal;
  },
}

// Expected: '>>> some val'
// Actual: '>>> some val'
console.log('>>>', obs.accessor);

https://jsfiddle/q4w6e3n3/6/

I would expect it to have the same issues but works as a charm are getters this keyword somehow bound to the object they were added to?

• javascript
• babeljs

• 1 This appears to be a bug in the transpilation, it should not use Object.assign for "own" properties. You should report it to the plugin. – Bergi Commented Sep 15, 2016 at 17:56
• The this object follows the standard rules. When you call the getter like obs.accessor, then this will (should) be obs (except if it was explicitly bound, which is not the case here). This turns out not to be the case where you get undefined as output, which is explained by the Object.assign you found. Note the difference when you add console.log(abs === this); in the getter. This is not good. – trincot Commented Sep 15, 2016 at 19:43
• not sure Object.assign causes the issue here. the context seems to be bound to the original object when using the get syntax a normal method works just fine, as shown here jsfiddle/q4w6e3n3/8 – roy riojas Commented Sep 15, 2016 at 20:10

1 Answer 1

Object.assign won't copy accessors. So when your splat is before your getter babel and its various voodoos uses Object.assign and the accessor isn't copied onto the first object from the second, well kind of, voodoo again. When your splat is after the getter, then it assigns the splatted properties onto the object with the getter, and the getter is preserved.

See here: MDN - Object.assign

Relevant code excerpt:

**Copying Accessors**
var obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

var copy = Object.assign({}, obj); 
console.log(copy); 
// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value.

// This is an assign function that copies full descriptors
function pleteAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});
    // by default, Object.assign copies enumerable Symbols too
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

var copy = pleteAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }