JS的Object.defineProperty的使用問題

我想通過修改data對象的setter方法，來獲得一個改變對象頁面進行相應修改的效果。data有l(wèi)eftData和rightData兩個屬性，分別修改其setter方法。然后在控制臺中輸入如data.leftData = "aa";這樣的語句，但始終都只會修改rightData對應的DOM，不知道為什么，請大家?guī)臀铱纯?，謝謝~ 代碼示例如下：

<!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>

回答

編輯回答

舊顏

var 這個變了可以重復聲明 let不可以重復聲明一個變量
(var key in data) var 得到最后一個而 let 得到等于所有

2017年2月12日 13:41

編輯回答

浪婳

典型的閉包問題。
可以這么寫

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

2018年1月9日 15:52

編輯回答