分配对象属性(在循环中)并包含设置器会导致未定义的值 [英] Assigning object properties (in a loop) and including a setter results in undefined values

问题描述

这是我第一次尝试使用 Javascript 的 Object.defineProperty 和/或 defineProperties，显然我完全不正确地使用它.我将一个 cfg 对象传递给一个 Javascript 函数构造函数，然后在该构造函数中循环遍历配置和

This is my first attempt at using Javascript's Object.defineProperty and/or defineProperties and apparently I'm doing it completely incorrectly. I am passing a cfg object into a Javascript function constructor, then inside that constructor am looping over the config and

1. 在每个 cfg 键上调用 Object.defineProperty
2. 分配this[key] = cfg[key]

然而，每个 this[key] 都以 undefined 作为它的值出现.我尝试了一些不同的事情，例如将 writable 属性设置为 true，但得到一个错误，指出这与 set/function 冲突.我也试过使用 Object.defineProperties 得到相同的结果.我不认为这是 this 的范围问题，甚至可以肯定地在 setter 上使用了 .bind(this) ，但无济于事.代码可以在 https://repl.it/@dexygen/js-define 运行-properties 并且我将其包含在内联下方.预期的结果当然而不是 undefined 是 this.foo 例如将包含传递给对象构造函数

However every this[key] emerges with undefined as it's value. I've tried a few different things, such as setting the writable attribute to true, but got an error that this conflicts with the set/function. I've also tried using Object.defineProperties with the same result. I don't think it's a scoping issue with this and have even used .bind(this) on the setters to be sure, but to no avail. The code is can be run at https://repl.it/@dexygen/js-define-properties and I am including it below inline. Expected result of course rather than undefined is that this.foo e.g. will contain the string 'foo' from cfg.foo passed into the object constructor function

let myObj = new ObjInstance({
    foo: 'foo',
    bar: 'bar',
    baz: 'baz'
});

function ObjInstance(cfg) {
    for (let key in cfg) {
      Object.defineProperty(this, key, {
          configurable: true,
          enumerable: true,
          // writable: true, // throws error in conjunction with set function
          set: (function(val) {
              console.log('this[' + key + ']: ' + this[key]); //undefined :(
          }).bind(this)
      });
      console.log('cfg[key]: ' + cfg[key]);
      this[key] = cfg[key];
    }
    console.log(this);
    console.log('this.foo: ' + this.foo);
    /* // if you comment this in, comment out the above for loop
    let objProperties = {}
    for (let key in cfg) {
        objProperties[key] = {
          configurable: true,
          enumerable: true,
          set: (function(val) {
              console.log('this[' + key + ']: ' + this[key]);
          }).bind(this)
        }
    }
    for (let key in cfg) {
      console.log('cfg[key]: ' + cfg[key]);
      this[key] = cfg[key];
    }
    Object.defineProperties(this, objProperties);
    for (let key in cfg) {
      console.log('cfg[key]: ' + cfg[key]);
      this[key] = cfg[key];
    }
    */
}

推荐答案

我想感谢第一个发表评论但他拒绝回答的人，所以我发布自己的评论不仅基于他的评论(事实上我没有提供一个 getter 或多或少是我从我的 setter 中取回 undefined 的原因，但也解决了一些其他答案，一个是对我的用例的质疑，我在 setter 中用注释解决了这个问题.

I want to thank the first person to comment but he's declined to answer so I am posting my own based not only on his comment (the fact that I had not providde a getter more or less being the reason I was getting back undefined from my setter), but also addressing issues brought up by some of the other answers, one being the questioning of my use case, which I address with a comment in the setter.

此处的工作代码:https://repl.it/@dexygen/javascript-defineProperty- 工作

let myObj = new ObjInstance({
    foo: 'foo',
    bar: 'bar',
    baz: 'baz'
});

function ObjInstance(cfg) {
    for (let key in cfg) {
      this[key] = cfg[key];

      Object.defineProperty(this, key, {
          configurable: true,
          enumerable: true,
          set: function(val) {
              cfg[key] = val;
              // additionally plan to emit an event
          },
          get: function() {
              return cfg[key];
          }
      });
    }

    console.log('this.foo: ' + this.foo);
    this.foo = 'foobarbaz';
    console.log('this.foo: ' + this.foo);
}

这篇关于分配对象属性(在循环中)并包含设置器会导致未定义的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！