Object.defineProperty用法记录一下(很多前端框架底层实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineProperty</title>
</head>
<body>
<script>
    class Test {
        constructor(data) {
            for (let key in data) {
　　　　　　　　　　// this 不能为data,否则会报错，我也不知道为啥。。。。。。。
                Object.defineProperty(this, key, {
                    configurable: false,
                    enumerable: true,
                    set(val) {
                        console.log('设置值事件')
                        data[key] = val;
                    },
                    get() {
                        console.log('获取值事件')
                        return data[key];
                    }
                })
            }
        }
    }

    let data = {
        name: 'sweet boy'
    }
    let test = new Test(data);
    
</script>
</body>
</html>

关于什么是Object.defineProperty()，请参考下面链接：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

在浏览器中打开运行过程为