本文要說的就是跟「資料改變」有關的兩個API —— 其中最先出場的當然是 Object.defineProperty ，它有著“悠久的歷史”；而自es6后，另一個API proxy 越來越火，他們之間也算各有優勢，只是 從使用上來看，前者更突出對單個資料的處理，而后者更重視對資料集的處理：
Object.defineProperty？
其實這個API主要是用來設定物件屬性的可訪問性！現在常用的“添加/洗掉屬性”就是基于“物件屬性設定了可寫可操作”的前提下，
以前看過一道面試題，大意就是：“你能模擬let和const嗎？他們有什么不同之處？” 它們有何不同？那無疑就是 變數是否可更改值，也就是常說的 writable，
Object.defineProperty方法用于在物件上定義一個新屬性，或者修改物件現有屬性，并回傳此物件，注意，請通過Object構造器呼叫此方法，而不是物件實體， —— MDN
基本語法如下：
Object.defineProperty(obj, prop, descriptor)
OK，結合基本用法與概念，我們來試試添加屬性與修改屬性，
// 添加屬性
let obj = {};
Object.defineProperty(obj, 'name', {value:'yxm'});
obj.name;// 'yxm'
// 修改現有屬性
obj.age = 20;
// 重返18歲
Object.defineProperty(obj, 'age', {value:18});
obj.age;// 18
通過上面的例子演示我們可知，語法中的obj是我們要添加/修改屬性的物件，prop是我們希望添加/修改的屬性名，而descriptor是我們添加/修改屬性的具體描述，descriptor 包含屬性較多，我們展開說 ——
Object.defineProperty方法中的descriptor屬性繁多，所以它也非常強大，我們之前說的資料劫持，資料是否可寫，是否可洗掉，是否可列舉都在這個descriptor中定義，在介紹每個屬性前，我們還得引入一個新概念，即：
物件里目前存在的屬性描述符有兩種主要形式：資料描述符和存取描述符，資料描述符是一個具有值的屬性，該值可以是可寫的，也可以是不可寫的，存取描述符是由 getter 函式和 setter 函式所描述的屬性，一個描述符只能是這兩者其中之一，不能同時是兩者，
descriptor中屬性包含6個，筆者將其分為了3類，資料描述符類（value，writable），存取描述符類（get，set），以及能與資料描述符或者存取描述符共存的共有屬性（configurable，enumerable）：
- writable是一個布林值，若不定義默認為false，表示此條屬性只可讀，不可修改，舉個例子：
let o = {};
Object.defineProperty(o, 'name', {
value: 'yxm',
writable: false
});
// 嘗試修改name屬性
o.name = 'mxc';
// 再次讀取，結果并未修改成功
console.log(o.name); // yxm
！注意，如果在嚴格模式下，修改writable屬性為false的物件屬性會報錯，但如果將上述代碼的writalbe改為false就可以隨意更改了，
而在MDN中關于writable屬性的描述為：
當該屬性的 writable 鍵值為 true 時，屬性的值，也就是上面的 value，才能被賦值運算子改變，
const宣告的變數是不是真的一定不可修改？準確來說可以改，分兩種情況，一定要區分清楚：
// 值為基本型別
const a = 1;
a = 2;// 報錯
// 值為復雜型別
const b = [1];
b = [1,2];// 報錯
const c = [1];
c[0] = 0;
c;// [0]
如果我們const宣告變數賦值是基本型別，只要修改值一定報錯；如果值是參考型別，比如值是一個陣列，當我們直接使用賦值運算子整個替換陣列還是會報錯，但如果我們不是整個替換陣列而是修改陣列中某個元素可以發現并不會報錯，
這是因為對于參考資料型別而言，變數保存的是資料存放的參考地址，比如b的例子，原本指向是[1]的地址，后面直接要把地址改成陣列[1,2]的地址，這很明顯是不允許的，所以報錯了，但在c的例子中，我們只是把c地址指向的陣列中的一位元素改變了，并未修改地址，這對于const是允許的，
而這個特性對于writable也是適用的，比如下面這個例子：
let o = {};
Object.defineProperty(o, 'age', {
value: [20],
writable: false
});
// 嘗試修改name屬性
o.age[0] = 18;
// 再次讀取，修改成功
console.log(o.age); // 18
OK，我們介紹了descriptor中的資料描述符相關的vaule與writbale，接著聊聊有趣的存取描述符，也就是在vue中也出現過getter、setter方法，
我們知道，JavaScript中物件賦值與取值非常方便，有如下兩種方式：
let o = {};
// 通過.賦值取值
o.name = 'yxm';
//通過[]賦值取值，這種常用于key為變數情況
o['age'] = 20;
一個很直觀的感受就是，物件賦值就是種瓜得瓜種豆得豆，我們給物件賦予了什么，獲取的就是什么，那大家有沒有想過這種情況，賦值時我提供1，但取值我希望是2？巧了，這種情況我們就可以使用Object.defineProperty()中的存取描述符來解決這個需求，說直白點，存取描述符給了我們賦值/取值時資料劫持的機會，也就是在賦值與取值時能自定義做一些操作，
-
getter函式在獲取屬性值時觸發，注意，是你為某個屬性添加了getter在獲取這個屬性才會觸發，如果未定義則為undefined，該函式的回傳值將作為你訪問的屬性值，
-
setter函式在設定屬性時觸發，同理你得為這個屬性提前定義這個方法才行，設定的值將作為引數傳入到setter函式中，在這里我們可以加工資料，若未定義此方法默認也是undefined，
OK，讓我們用getter與setter模擬最常見的物件賦值與取值，看個例子：
let o = {};
o.name = 'yxm';
console.log(o.name); // 'yxm'
//使用get set模擬賦值取值操作
let age;
Object.defineProperty(o, 'age', {
get() {
// 直接回傳age
return age;
},
set(val) {
// 賦值時觸發，將值賦予變數age
age = val;
}
});
o.age = 18;
console.log(o.age); // 18
在上面例子模擬中，只要為o賦值setter就會觸發，并將值賦予給age，那么在讀取值getter直接回傳變數age即可，
最后，讓我們了解剩余兩個屬性configurable與enumerable，
- enumerable值型別為Boolean，表示該屬性是否可被列舉，啥意思？我們知道物件中有個方法Object.keys()用于獲取物件可列舉屬性，比如：
let o = {
name: 'yxm',
age: 20
};
Object.keys(o); // ['name','age']
通俗點來說，上面例子中的兩個屬性還是可以遍歷訪問的，但如果我們設定enumerable為false，就會變成這樣：
let o = {
name: 'yxm'
};
Object.defineProperty(o, 'age', {
value: 20,
enumerable: false
});
// 無法獲取keys
Object.keys(o); // ['name']
// 無法遍歷訪問
for (let i in o) {
console.log(i); // 'name'
};
- configurable的值也是Boolean，默認是false，configurable 特性表示物件的屬性是否可以被洗掉，以及除 value 和 writable 特性外的其他特性是否可以被修改，
let o = {
name: 'yxm'
};
Object.defineProperty(o, 'age', {
value: 20,
configurable: false
});
delete o.name; //true
delete o.age; //false
o.name; //undefined
o.age; //20
var o = {};
Object.defineProperty(o, 'name', {
get() {
return 'mxc';
},
configurable: false
});
// 報錯，嘗試通過再配置修改name的configurable失敗，因為已經定義過了configurable
Object.defineProperty(o, 'name', {
configurable: true
});
//報錯，嘗試修改name的enumerable為true，失敗，因為未定義默認為false
Object.defineProperty(o, 'name', {
enumerable: true
});
//報錯，嘗試新增set函式，失敗，一開始沒定義set默認為undefined
Object.defineProperty(o, 'name', {
set() {}
});
//嘗試再定義get，報錯，已經定義過了
Object.defineProperty(o, 'name', {
get() {
return 1;
}
});
// 嘗試添加資料描述符中的vaule，報錯，資料描述符無法與存取描述符共存
Object.defineProperty(o, 'name', {
value: 12
});
由于前面我們說了，未定義的屬性雖然沒用代碼寫出來，但它們其實都有了默認值，當configurable為false時，這些屬性都無法被重新定義以及修改，
那么到這里，我們把descriptor中所有屬性都介紹完了，在使用中有幾點需要強調，這里再擴展一下：
前面概念已經提出物件屬性描述符要么是資料描述符（value，writable），要么是存取描述符（get，set），不應該同時存在兩者描述符，
var o = {};
Object.defineProperty(o, 'name', {
value: 'hhh',
get() {
return 'mxc';
}
});
這個例子就會報錯，其實不難理解，存取方法就是用來定義屬性值的，value也是用來定義值的，同時定義程式也不知道該以哪個為準了，所以用了value/writable其一，就不能用get/set了；不過configurable與enumerable這兩個屬性可以與上面兩種屬性任意搭配，
我們在前面已經說了各個屬性是有默認值的，所以在用Object.defineProperty()時某個屬性沒定義不是代表沒用這條屬性，而是會用這條屬性的默認值，
let o = {};
Object.defineProperty(o, 'name', {
value: 'hhh'
});
//等同于
Object.defineProperty(o, 'name', {
value: 'hhh',
writable: false,
enumerable: false,
configurable: false
});
var o = {};
o.name = 'yxm';
//等同于
Object.defineProperty(o, 'name', {
value: 'yxm',
writable: true,
enumerable: true,
configurable: true
});
//等同于
let name = 'yxm';
Object.defineProperty(o, 'name', {
get() {
return name;
},
set(val) {
name = val;
},
enumerable: true,
configurable: true
});
Proxy的天下
Proxy 物件用于創建一個物件的代理，從而實作基本操作的攔截和自定義（如屬性查找、賦值、列舉、函式呼叫等），可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫，
const p = new Proxy(target, handler)
- target: 使用 Proxy 包裝的目標物件（可以是任何型別的 JavaScript 物件，包括原生陣列，函式，甚至另一個代理），
- handler: 一個通常以函式作為屬性的物件，用來定制攔截行為，
在支持 Proxy 的瀏覽器環境中，Proxy 是一個全域物件，可以直接使用，Proxy(target, handler)是一個建構式，target是被代理的物件，最侄訓傳一個代理物件，
proxy針對的也是“物件整體”，它在監聽時不管你要用的是哪個具體屬性，先掛上再說，
API 概覽如下：
get(target, propKey, receiver)：攔截物件屬性的讀取，比如 proxy.foo 和 proxy[‘foo’]；set(target, propKey, value, receiver)：攔截物件屬性的設定，比如 proxy.foo = v 或 proxy[‘foo’] = v ，回傳一個布林值；has(target, propKey)：攔截 propKey in proxy 的操作，回傳一個布林值；deleteProperty(target, propKey)：攔截 delete proxy[propKey]的操作，回傳一個布林值；ownKeys(target)：攔截 Object.getOwnPropertyNames(proxy) 、 Object.getOwnPropertySymbols(proxy) 、 Object.keys(proxy) 、 for…in 回圈，回傳一個陣列，該方法回傳目標物件所有自身的屬性的屬性名，而 Object.keys() 的回傳結果僅包括目標物件自身的可遍歷屬性；getOwnPropertyDescriptor(target, propKey)：攔截 Object.getOwnPropertyDescriptor(proxy, propKey) ，回傳屬性的描述物件；defineProperty(target, propKey, propDesc)：攔截 Object.defineProperty(proxy, propKey, propDesc） 、Object.defineProperties(proxy, propDescs)，回傳一個布林值；preventExtensions(target)：攔截 Object.preventExtensions(proxy) ，回傳一個布林值；getPrototypeOf(target)：攔截 Object.getPrototypeOf(proxy)，回傳一個物件 ；isExtensible(target)：攔截 Object.isExtensible(proxy) ，回傳一個布林值；setPrototypeOf(target, proto)：攔截 Object.setPrototypeOf(proxy, proto) ，回傳一個布林值，如果目標物件是函式，那么還有兩種額外操作可以攔截；apply(target, object, args)：攔截 Proxy 實體作為函式呼叫的操作，比如 proxy(…args)、proxy.call(object, …args)、proxy.apply(…)`；construct(target, args)：攔截 Proxy 實體作為建構式呼叫的操作，比如 new proxy(…args)
最常用的方法就是get和set了：
const target = {
name: 'jacky',
sex: 'man',
}
const handler = {
get(target, key) {
console.log('獲取名字/性別')
return Reflect.get(target, key)
},
}
const proxy = new Proxy(target, handler)
console.log(proxy.name)
運行，列印臺輸出:
獲取名字/性別
jacky
在獲取name屬性其實是先進入get方法，在get方法里面列印了獲取名字/性別，然后通過Reflect.get(target, key)的回傳值拿到屬性值，相當于target[key]
const target = {
name: 'jacky',
sex: 'man',
}
const handler = {
get(target, key) {
console.log('獲取名字/性別')
return Reflect.get(target, key)
},
set(target, key, value) {
return Reflect.set(target, key, `強行設定為 ${value}`)
},
}
const proxy = new Proxy(target, handler)
proxy.name = 'monkey'
console.log(proxy.name)
運行輸出：
獲取名字/性別
強行設定 monkey
設定proxy.name = 'monkey'，這是修改屬性的值，則會觸發到set方法， 然后我們強行更改設定的值再回傳，達到攔截物件屬性的設定的目的，
Reflect物件與Proxy物件一樣，也是 ES6 為了操作物件而提供的新 API，（不過它在使用上似乎更偏向于
Object.defineProperty）
Reflect.get(target, name, receiver) ：查找并回傳target物件的name屬性，如果沒有該屬性，則回傳undefined：
Reflect.set(target, name, value, receiver) //設定target物件的name屬性等于value，
proxy 會改變 target 中的 this 指向，一旦 Proxy 代理了 target，target 內部的 this 則指向了 Proxy 代理
const target = new Date('2021-01-03')
const handler = {}
const proxy = new Proxy(target, handler)
console.log(proxy.getDate())
運行代碼，會發現報錯，提示TypeError: this is not a Date object，即 this 不是 Date 物件的實體，這時需要我們手動系結原始物件即可解決：
const target = new Date('2021-01-03')
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target) // 系結
}
return Reflect.get(target, prop)
},
}
const proxy = new Proxy(target, handler)
console.log(proxy.getDate()) // 3
注意：使用時一定注意proxy的set中引數對于“基本資料型別”和“參考資料型別”的不同，
綜合：模仿vue雙向資料系結行為
假設頁面上有一個input框，有id為“example”，有一物件，名為test，test中有一個屬性叫value，它的值是input中實時輸入的值，而且當手動改變value值時，input框中的文字也會相應的改變，要求實時列印test.value的值：
Object.defineProperty版：
let test={};
Object.defineProperty(test,'value',{
set(newVal){
test._value=newVal;
document.querySelector('#example').value=newVal;
},
get(){
return test._value;
}
});
document.querySelector('#example').addEventListener('input',function(e){
test.value=e.target.value;
console.log(test.value);
})
proxy版：
let test={
value:""
}
let text=document.querySelector("#example");
text.addEventListener("input",()=>{
// 通過輸入改變物件中屬性值
test.value=text.value
})
test=new Proxy(test,{
get(target,key){
return target[key]
},
set(target,key,value){
console.log(value)
target[key]=value
// 在這里順便改變input中的值
text.value=value
return true
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273257.html
標籤：其他
上一篇：作用域和閉包