JS的Object.defineProperty的使用问题

我想通过修改data对象的setter方法,来获得一个改变对象页面进行相应修改的效果。data有leftData和rightData两个属性,分别修改其setter方法。然后在控制台中输入如data.leftData = "aa";这样的语句,但始终都只会修改rightData对应的DOM,不知道为什么,请大家帮我看看,谢谢~ 代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./MVVM.js"></script>
    <title>nodeText</title>
    <style>
        #container div{width:100px;height:50px;}
        #left{border:1px solid red;}
        #right{border:1px solid green;}
    </style>
</head>
<body>
    <div id="container">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
<script type="text/javascript">
    var data = {
        leftData : "left",
        rightData : "right"
    }
    var react = {
        leftData : "left",
        rightData : "right"
    };

    window.onload = function(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        for(var key in data){
            Object.defineProperty(data, key, {
                set : function(newVal) {
                    if(newVal != data[key]) {
                        var ele = document.getElementById(react[key]);
                        ele.innerHTML = newVal;
                    }
                }
            })   
        }
    }
</script>
</html>
阅读 2.7k
3 个回答

貌似是var 的问题?

clipboard.png

把这个改成let试试

典型的闭包问题。
可以这么写

        Object.keys(data).forEach(function(key){
            Object.defineProperty(data, key, {
                set : function(newVal) {
                      console.log(data,key)
                    if(newVal != data[key]) {
                        var ele = document.getElementById(react[key]);
                        ele.innerHTML = newVal;
                    }
                }
            }) 
        })

var 这个变了可以重复声明 let不可以重复声明一个变量
(var key in data) var 得到最后一个 而 let 得到等于所有

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题