JavaScript 之 對象屬性的特性 和defineProperty方法

對象是無序屬性的集合，而這些屬性在建立是都帶有一些特徵值（能夠理解爲屬性的屬性,天生自帶的），這些特徵值是爲了實現JavaScript引擎用的，所以JavaScript不能直接訪問。

JavaScript經過這些特徵值來定義屬性的行爲（屬性是否刪除，枚舉，修改等）。

例如，在全局定義的屬性是會掛載到window上的。當想刪除window上的這個屬性，是不能夠的。也就是說window上的屬性是不可配置的。delete window.obj     //false  

Function.prototype當你修改爲其餘值，其原始值並無改變。是不可寫的。

在好比，咱們的for in是能夠枚舉原型鏈上屬性的，但全部的原型頂端都是Object.prototype.但for in 並無枚舉出來。因此Object.prototype是不可枚舉的。

屬性分爲兩種類型：1數據屬性 2訪問器屬性。例如：通常咱們本身在對象設置的屬性默認是數據屬性，而Window上的那麼屬性是訪問器屬性。

怎樣知道這個屬性究竟是數據屬性仍是訪問器屬性？

使用Object.getOwnPropertyDescriptor(屬性所在的對象，屬性)方法。 返回一個對象，當時訪問器屬性時，該對象屬性有enumerable，configurable,get,set。當時數據屬性，該對象返回的屬性有value，writable,enumerable,configurable.

var obj  = {name:'zwq',age:18};
console.log(Object.getOwnPropertyDescriptor(obj,'name'));  //name屬性屬性
//{value: "zwq", writable: true, enumerable: true, configurable: true}

console.log(Object.getOwnPropertyDescriptor(window,'name'));  //window上的name屬性時訪問器屬性
//enumerable: true, configurable: true, get: ƒ, set: ƒ}   

 

數據屬性

• 數據上行包含一個數據值的位置，能夠讀取和寫入值，數據屬性有4個描述其行爲的屬性，因爲是這些值不能直接訪問，是內部值，因此該規範把他們放在兩對括號中。
• 屬性是否可配置：[[Configurable]]:表可否經過delete刪除屬性，可以修改屬性的特性，可否把屬性修改成訪問器屬性
• 屬性是否可枚舉：[[Enumerable]]:表可否經過for-in循環返回屬性
• 屬性是否可修改：[[Writable]]
• 屬性的數據值　：[[value]]讀取屬性的時候，從這個位置讀，寫入屬性的時候，把新值保存到這個位置。

普通定義的屬性 默認值前三個都是true，最後一個是undefined。

當咱們想到修改屬性默認的特性，使用Object.defineProperty(屬性所在對象，屬性的名字，描述符對象)方法。

當使用Object.defineProperty方法第二個參數屬性的名字不存在時，該方法會建立這個屬性，而且該屬性的特性除了value剩下的特性的默認值都是false。也就是說當你想讓這個用Object.defineProperty方法建立的屬性跟正常的屬性同樣可枚舉，配置，寫入，必須把這個屬性值的特性都改成true。不然就是false。

 

　　　　　var obj  = {name:'zwq',age:18};

        Object.defineProperty(obj,'name',{ 修改name屬性的特性，值爲haha,而且name屬性不能修改值
            value:'haha',
            writable:false  //默認值是true，改成false，不可寫。
        })

        Object.defineProperty(obj,'sex',{建立一個sex屬性，這個屬性不可枚舉
            value:'woman',
            writable:true,
            configurable:true,
        })

 

 

 

 

 訪問器屬性

訪問器屬性不包含writable和value,他包含的是一對getter和setter函數，在讀取訪問器屬性是，會調用getter函數，並返回有效的值，在寫入訪問器屬性時（修改屬性）會調用setter函數並傳入新值。訪問器包含4個特性

 

• 屬性是否可配置：[[Configurable]]:表可否經過delete刪除屬性，可以修改屬性的特性，可否把屬性修改成訪問器屬性
• 屬性是否可枚舉：[[Enumerable]]:表可否經過for-in循環返回屬性
• [[Get]]:在讀取屬性時調用的函數。默認值是undefined。
• [[Set]]:在寫入（或修改）屬性時調用的函數。默認值undefined。

定義訪問器屬性，一樣也必須商用Object.defineProperty().

　　　　 function Person(){
            this._name = 'zwq',
            this.age =  18
        }
        var person = new Person();
        
        
        Object.defineProperty(person,'name',{
            set(newValue){
                console.log('set');
                this._name = newValue   //設置或修改屬性時，會調用set函數，把設置的值經過參數傳進去後，用一個變量或屬性保存。而且當調用get，return就是返回的這個值
            },
            get(){
                return this._name;   //當讀取屬性時 返回return的值
            }
            
        })

 不必定非要同時指定getter和setter，只指定getter意味着屬性是不能寫。

 

vue的雙向數據劫持綁定（主要應用於表單中）的原理就是利用Object.defineProperty來檢測數據的變化。

雙向劫持綁定時當視圖（頁面的某一元素）發生改變時，數據跟着改變，當數據改變時，視圖也跟着改變。例以下面的輸入框裏面的內容改變時，數據（對象或數組）改變。檢測數據改變。底下的div文本根據數據的改變而改變。

 

 

 上面咱們介紹到，當數據改變時會觸發set方法。由此咱們就能夠檢測數據的變化。<input type="text" id="Oinput"><div id="view"></div>

 　　　　 var input = document.getElementById('Oinput'); var view = document.getElementById('view'); var data = { valueObj :{ value:'zwq' } } //當輸入框數據發生改變時，數據跟着改變 input.oninput = function(){ data.valueObj.value = this.value; } // 更新視圖 function upData(){ view.innerText = data.valueObj.value; } upData(data); obServe(data); // 監控某個對象是否發生改變 function obServe(data){ //判斷當前傳的是不是對象，若是不是，直接return if(!data || !(data instanceof Object)){return data} 　　　　　　//獲取全部屬性名。使用keys方法能夠獲取全部屬性名（包括原型上的）並保存帶數組中 var arrProperty = Object.keys(data);　　　　　　 //遍歷數組，調用defindRective檢測每個屬性值的改變　 arrProperty.forEach(function(key){　　　　　　　　　　defindRective(data,key,data[key]); //傳入3個參數，當前對象，當前屬性，當前屬性值 }) } function defindRective(obj,key,val){ obServe(val); //使用遞歸，當想上面的數組，對象套對象的形式，因爲裏面的對象是一個引用值，沒法檢測裏面的數據變化，因此使用遞歸。 Object.defineProperty(obj,key,{ //核心:使用Object,definPropert的set檢測數據的改變。 set(newValue){ console.log(5); if(newValue == val) return val; val = newValue; upData(); //當數據變化，跟新視圖 }, get(){ return val; } }) }