總結
主要利用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>