代码之家 › 专栏 › 技术社区 › William Bueti

是否可以循环使用属性来动态定义getter/setter?

getter-setter javascript

William Bueti · 技术社区 · 7 年前

假设如下:

var first = {
    bob: null,
    jim: null,
    sue: null
},
second = {};

我想能够循环一下 first 并在上定义getter/setter second

for (var name in first) {
    Object.defineProperty(second, ('' + name), {
        get: function() {
            return first[name];
        },
        set: function(value) {
            first[name] = value;
        }
    });
}

问题是getter/setter似乎只影响迭代的最后一个属性(在本例中) sue

不过,以下方法似乎效果不错:

var second = {
    get bob() {
        return first['bob'];
    },
    set bob(value) {
        first['bob'] = value;
    },
    get jim() {
        return first['jim'];
    },
    set jim(value) {
        first['jim'] = value;
    },
    get sue() {
        return first['sue'];
    },
    set sue(value) {
        first['sue'] = value;
    }
};

1 回复 | 直到 7 年前

ElJackiste 7 年前

正如评论中提到的,这是一个范围问题。

您的变量确实是“提升的”,但这并不是真正的问题。这主要是因为变量 name 是全局范围的一部分。在JavaScript中,作用域主要是函数。控制结构作为循环,条件。。。不声明新作用域。

如果这样做:

var first = {
  bob: 'text',
  jim: 42,
  sue: true
},
second = {};

for (var name in first) {
  Object.defineProperty(second, name, {
    value: first[name],
    enumerable: true
  });
}

console.log(second.bob); // "test"
console.log(second.jim); // 42
console.log(second.sue); // true

它将起作用,因为first[name]在循环的每次迭代中都进行求值。

如果你这么做了:

var first = {
  bob: 'text',
  jim: 42,
  sue: true
},
second = {};

for (var name in first) {
  Object.defineProperty(second, name, {
    get: function() {
      return first[name];
    },
    set: function(value) {
      first[name] = value;
    },
    enumerable: true
  });
}

console.log(second.bob); // true
console.log(second.jim); // true
console.log(second.sue); // true

它不起作用,因为first[name]只在调用getter/setter函数时才计算。如果在循环之后: second.bob getter函数将被调用,它在自己的作用域中找不到名称。然后它将在父范围中搜索,这里是全局范围,其中定义了名称。正在完成的循环,name等于最后一次循环迭代。如果你这样做的话,对二传手也是一样的 second.bob = 'new value'; . setter函数作用域没有 名称 变量并将在全局范围中查找,其中name是最后一个循环迭代。

解决方案是定义控制结构循环 for 作为变量的作用域 名称 与 let const 关键词。您还可以在循环外部的函数中声明definedProperty进程,并仅通过传递参数在循环内部调用此函数

// With 'let'
for (let name in first) {
  Object.defineProperty(second, name, {
    // ...
  });
}

// With 'const'
for (const name in first) {
  Object.defineProperty(second, name, {
    // ...
  });
}

// With function
var defineProp = function (name) {
  Object.defineProperty(second, name, {
    // ...
  });
};

for (var name in first) {
  defineProp(name);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前