Question

这里我有一个名为myobj的对象，它只有一个属于'age'的属性。我想使用object.defineProperty（）的get和set方法添加另一个名为'name'的属性。但我必须使用一个变量。这意味着变量保存我传递给'set'方法的值，而不是myobj.name its.console.dir（myobj）显示myobj对象的age和name属性，并且值分配给myobj.name属性。但是如果变量保存了值，那么它是如何分配给myobj的。 name属性??

enter image description here

var myobj={age:2};

(function(){

var name;
Object.defineProperty(myobj,'name',
{
    enumerable:true,
    get:function(){
         return name;

    },
    set:function(val){

       name=val;
    }


});


myobj.name='jack';
})();
for(i in myobj){
   console.log(myobj[i]);
}
console.dir(myobj);

Answer 1

但是如果变量保持该值，那么它是如何分配给myobj.name属性的？

它未分配给myobj.name，但console.dir()枚举所有属性，包括您定义的属性（由变量支持）。

要使用.defineProperty()创建私有属性，您可以这样做：

function Foo(age)
    {
        var name = 'jack';

        this.age = age;

        Object.defineProperty(this, 'name', {
          enumerable:true,
          get: function() {
              return name;
          },
          set: function(val) {
              name=val;
          }
        });
    }

var f = new Foo(33);
alert(f.name); // "jack"

更新

虽然该属性不会出现在for..in循环中，除非枚举为真，console.dir()可能不会遵循该设置（例如Chrome）。

Answer 2

回答您的问题，具体是针对具体实施的。所有的javascript引擎都会做不同的事情。就像Chrome的情况一样，它将是一个与你的setter交互的C ++代码，并且会让这些东西神奇地起作用。

这是一个很好的例子，说明它为何如此运作。通过这种方式，DOM元素被屏蔽，因此它可以缩短获取和设置的方式。我已将name变量更改为输入元素以演示此内容。

<!DOCTYPE html>
<html>

<head>
<body>
<input type="text" id="getset">
<script>
var myobj={age:2};

(function(){

var name = document.getElementById('getset');
Object.defineProperty(myobj,'name',
{
    enumerable:true,
    get:function(){
         return name.value;

    },
    set:function(val){

       name.value=val;
    }


});
name.addEventListener('click', function(){
    myobj.name = 'clicked jack';
    console.log(myobj.name);
});

myobj.name='jack';
})();
for(i in myobj){
   console.log(myobj[i]);
}
console.dir(myobj);



</script>


</body>

</html>

使用get＆amp; amp;为对象文字的属性添加值组

2 个答案:

更新