Javascript 使用get&；为对象文字的属性添加值；设置_Javascript

Javascript 使用get&；为对象文字的属性添加值；设置

javascript

Javascript 使用get&；为对象文字的属性添加值；设置,javascript,Javascript,这里我有一个名为myobj的对象，它只有一个属性，即“age”。我想使用object.defineProperty（）的get和set方法添加另一个名为“name”的属性。但我必须为此使用一个变量。这意味着该变量包含我传递给“set”方法的值，而不是myobj.name本身。console.dir（myobj）显示myobj对象的年龄和名称属性，并且该值已分配给myobj.name属性。但是，如果变量包含该值，则如何将其分配给myobj.name属性 var myobj={age:2}; (f

这里我有一个名为myobj的对象，它只有一个属性，即“age”。我想使用object.defineProperty（）的get和set方法添加另一个名为“name”的属性。但我必须为此使用一个变量。这意味着该变量包含我传递给“set”方法的值，而不是myobj.name本身。console.dir（myobj）显示myobj对象的年龄和名称属性，并且该值已分配给myobj.name属性。但是，如果变量包含该值，则如何将其分配给myobj.name属性

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);

但是如果一个变量持有该值，那么如何将其分配给myobj.name属性

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);

它没有分配给

myobj.name

，但是

console.dir（）

枚举所有属性，包括您定义的属性（由变量支持）

要使用

.defineProperty（）

创建私有属性，可以这样做：

函数Foo（年龄）
{
变量名称='jack'；
这个。年龄=年龄；
Object.defineProperty（此“名称”{
可枚举：正确，
get:function（）{
返回名称；
},
设置：功能（val）{
name=val；
}
});
}
var f=新的Foo（33）；
警报（f.name）；//“jack”

要回答您的问题，它是特定于实现的。所有的javascript引擎都会做不同的事情。就像在Chrome的情况下，会有一个C++代码与你的设置器交互，并且GATTER神奇地使这些事情起作用。这是一个很好的例子，说明了为什么它是这样工作的。通过这种方式，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>


var myobj={age:2}；
（功能（）{
var name=document.getElementById（'getset'）；
Object.defineProperty（myobj，'name'，
{
可枚举：正确，
get:function（）{
返回name.value；
},
设置：功能（val）{
name.value=val；
}
});
name.addEventListener（'click'，function（）{
myobj.name='clicked jack'；
console.log（myobj.name）；
});
myobj.name='jack'；
})();
对于（我在myobj）{
console.log（myobj[i]）；
}
console.dir（myobj）；

这可能看起来很傻，但他们就是这样决定的。这是魔法。您可以使用这些神奇的方法来屏蔽DOM等其他对象，并创建观察者模式。这一切都在javascript引擎中处理。我不确定这是否是您所要求的。。。但是：this.name=val；我试过了。这个.name=val在我的控制台中抛出了一个错误。为什么？要直接分配吗？@MaxBumaye this.name=val；将导致无限递归。但如果我将enumerable设置为false，它仍然是there@user3138436我觉得很难相信，我的浏览器证实了这一点；i、 e.将enumerable设置为false将使属性从

console.dir（）

@user3138436中消失。它是否仍在for循环中？由于它默认为false，我从代码中删除了“enumerable:true”语句并进行了检查。我正在使用chrome..@user3138436如果它仍在循环中，这是一个bug，但与Jack一样，我对此表示怀疑。您应该在其他浏览器中尝试。name不是html元素。那么如何向其中添加事件侦听器？？我没有得到“name.addEventListener（…）”语句？？请您在此上下文中解释变量名是element，或者您想要什么。只要小心常见的错误，就可以在这些get/set函数中放入所需的内容。实际上，让我困惑的是“input:text”值是如何首先分配给“jack”的？？这是set函数中的

name.value=val

部分。这是魔法。Object.defineProperty在属性上创建

魔术方法。