該接觸angular，就很好奇他是如何實現的，最近有些時間，就查閱了相關的東西，其實很簡單，並沒有想象中的那麼高大上。

從原理觸發

在JavaScript中給一個物件新增屬性可以像下面這樣

obj.age=20;
obj.say=function(){}

還可以通過Object.defineProperty來定義新屬性或者修改原有的屬性，其餘發如下

Object.defineProperty(obj,prop,descriptor)

語法中，obj是需要操作的目標物件，prop是需要定義或修改的屬性名字，descriptor所擁有的特性

然而關於descriptor目前有兩種形式，資料描述和存取器描述，關於存取器描述，他允許我們定義get,set等其他屬性，如下

var obj={};
var initValue='hello';
Object.defineProperty(obj,"newKey",{
    get:function(){
        return initValue;
    },
    set:function(value){
        initValue=value;
    }
});
console.log(obj.newKey);
obj.newKey='change value';
console.log(obj.newKey,initValue)

通過這個例子，我們知道了當獲取值的時候觸發get函式，當設定值得時候觸發set函式，設定的新的值由引數value拿到

實現程式碼

<input type="text" id="txt">
<p id="show-txt"></p>

var obj={};
let writeDom=document.getElementById("txt");
let showDom=document.getElementById("show-txt");
Object.defineProperty(obj,"txt",{
    get:function(){
        return obj;
    },
    set:function(value){
        showDom.innerHTML=value;
    }
});
writeDom.addEventListener("keyup",function(e){
    obj.txt=e.target.value;
})
 

其他的應用場景還需要小夥伴不斷的嘗試與發現。