鍍金池/ 問(wèn)答/HTML/ JS的Object.defineProperty的使用問(wèn)題

JS的Object.defineProperty的使用問(wèn)題

我想通過(guò)修改data對(duì)象的setter方法，來(lái)獲得一個(gè)改變對(duì)象頁(yè)面進(jìn)行相應(yīng)修改的效果。data有l(wèi)eftData和rightData兩個(gè)屬性，分別修改其setter方法。然后在控制臺(tái)中輸入如data.leftData = "aa";這樣的語(yǔ)句，但始終都只會(huì)修改rightData對(duì)應(yīng)的DOM，不知道為什么，請(qǐng)大家?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 這個(gè)變了可以重復(fù)聲明 let不可以重復(fù)聲明一個(gè)變量
(var key in data) var 得到最后一個(gè) 而 let 得到等于所有

2017年2月12日 13:41
編輯回答
浪婳

典型的閉包問(wèn)題。
可以這么寫

        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
編輯回答
陌南塵

貌似是var 的問(wèn)題？

clipboard.png

把這個(gè)改成let試試

2017年12月15日 13:40