技術標籤：javascript前端

文章目錄

• 一、Object.defineProperty介紹
• 二、實現一個簡單的MVVM
• 參考文章

一、Object.defineProperty介紹

該函式可以直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性， 並返回這個物件。

通俗理解就是：給物件新增一個新的屬性，或者針對物件裡的某些屬性，可以給這個屬性設定一些特性，比如是否只讀，是否可以被for…in或Object.keys()遍歷等。

1.語法

Object.defineProperty(obj, prop, descriptor)

其中obj是要在上面定義屬性的物件，prop是要定義或修改的屬性名稱，descriptor是屬性的描述符。

例如：

var obj = {};

Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

2.設定特性的方式有2種：資料描述符和存取描述符

• configurable: 是否可以刪除目標屬性或是否可以再次修改屬性的特性。
• enumerable: 此屬性是否可以被列舉（使用for…in或Object.keys()）。設定為true可以被列舉；設定為false，不能被列舉。預設為false。
• value： 屬性對應的值,可以使任意型別的值，預設為undefined。
• writable： 屬性的值是否可以被重寫。設定為true可以被重寫；設定為false，不能被重寫。預設為false。
• getter ：是一種獲得屬性值的方法，預設值為undefined。
• setter：是一種設定屬性值的方法，預設值為undefined。

二、實現一個簡單的MVVM

通過Object.defineProperty(obj, prop, descriptor)劫持物件的屬性讀寫。

//MVVM 實現input輸入框和show雙向繫結
function defineProperty(obj, attr){
    Object.
 
defineProperty(obj, attr, {
        get:function(){
            return this.attr;
        },
        set:function(val){
            if(this.attr == val) return;
            this.attr = val;
            document.getElementById('show').innerHTML = val;
        }
    })
}

var obj = {};
defineProperty(obj, 'txt');
document.getElementById('input').addEventListener('keyup', function(e){
    obj.txt = e.target.value;
})

參考文章

https://juejin.cn/post/6844903785844703240
https://blog.csdn.net/hefeng6500/article/details/75194506
https://www.cnblogs.com/soraly/p/10305157.html