总结
主要利用Object.defineProperty 、Object.keys 遍历等。
代码
<!DOCTYPE html>
<html>
<head>
<title>dymanic_data_binding_01</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<style type="text/css">
</style>
</head>
<body>
<ol>要求：
<li>传入参数只考虑对象，不考虑数组</li>
<li>new Observer返回一个对象，其data属性要能够访问到传递进去的对象</li>
<li>通过data访问属性和设置属性的时候，均能打印出对应的信息</li>
</ol>
<pre><code>
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
app1.data.name // 你访问了 name
app1.data.age = 100; // 你设置了 age，新的值为 100
app2.data.university // 你访问了 university
app2.data.major = 'science'; // 你设置了 major，新的值为 science
</code></pre>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
function Observer (data) {
if (_getType(data) !== 'object') throw 'wrong data type';
this.data = {};
Object.keys(data).forEach(function (v, i) {
Object.defineProperty(this.data, v, {
get: function () {
console.log(`你访问了 ${v}`);
return data;
},
set: function (value) {
console.log(`你设置了 ${v}，新的值为 ${value}`);
data = value;
}
});
}, this);
}
function _getType (obj) {
return Object.prototype.toString.call(obj).match(/ .+(?=\])/)[0].trim().toLowerCase();
}
</script>
</html>