ES6經常使用但被忽略的方法（第四彈）

時間 2020-06-29

原文原文鏈接

端午已過，繼續更新。
ES6經常使用但被忽略的方法（第一彈）
ES6經常使用但被忽略的方法（第二彈）
ES6經常使用但被忽略的方法（第三彈）
文章只整理做者本人認爲一些平常開發可能會用到的一些方法或者使用技巧，細節深刻請查看相關內容鏈接，歡迎補充交流。

Proxy

ES6-Proxy
Proxy 用於修改某些操做的默認行爲，等同於在語言層面作出修改，因此屬於一種「元編程」（meta programming），即對編程語言進行編程。能夠理解成，在目標對象以前架設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。

使用方式

將 Proxy 對象，設置到object.proxy屬性，從而能夠在object對象上調用。

const object = { proxy: new Proxy(target, handler) };
複製代碼

使用Proxy對象

const proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 'detanx';
  }
});

obj.name // 'detanx'
複製代碼

同一個攔截器函數，能夠設置攔截多個操做。

攔截操做

Proxy 支持的攔截操做一覽，一共 13 種。
1. get(target, propKey, receiver)：攔截對象屬性的讀取，好比proxy.foo和proxy['foo']。
2. set(target, propKey, value, receiver)：攔截對象屬性的設置，好比proxy.foo = v或proxy['foo'] = v，返回一個布爾值。
3. has(target, propKey)：攔截propKey in proxy的操做，返回一個布爾值。
4. deleteProperty(target, propKey)：攔截delete proxy[propKey]的操做，返回一個布爾值。
5. ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環，返回一個數組。該方法返回目標對象全部自身的屬性的屬性名，而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。
6. getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象。
7. defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布爾值。
8. preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值。
9. getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象。
10. isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。
11. setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。若是目標對象是函數，那麼還有兩種額外操做能夠攔截。
12. apply(target, object, args)：攔截 Proxy 實例做爲函數調用的操做，好比proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
13. construct(target, args)：攔截 Proxy 實例做爲構造函數調用的操做，好比new proxy(...args)。

get()

攔截某個屬性的讀取操做，能夠接受三個參數，依次爲目標對象、屬性名和 proxy 實例自己（嚴格地說，是操做行爲所針對的對象），其中最後一個參數可選。

const proxy = new Proxy({}, {
  get(target, propertyKey [, receiver]) {
    return target[propertyKey];
  }
});
複製代碼

若是一個屬性不可配置（configurable）且不可寫（writable），則 Proxy不能修改該屬性，不然經過 Proxy 對象訪問該屬性會報錯。

const target = Object.defineProperties({}, {
  foo: {
    value: 123,
    writable: false,
    configurable: false
  },
});

const handler = {
  get(target, propKey) {
    return 'abc';
  }
};

const proxy = new Proxy(target, handler);

proxy.foo
// TypeError: Invariant check failed
複製代碼

set()

set方法用來攔截某個屬性的賦值操做，能夠接受四個參數，依次爲目標對象、屬性名、屬性值和 Proxy 實例自己，其中最後一個參數可選。

let prxyo = new Proxy({}, {
  set(target, propertyKey, value [, receiver]) {
    return target[propertyKey];
  }
});
複製代碼

若是目標對象自身的某個屬性，不可寫（configurable）且不可寫（writable），那麼set方法將不起做用。

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false,
});

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = 'baz';
  }
};

const proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"
複製代碼

嚴格模式下，set代理若是沒有返回true，就會報錯。

'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 不管有沒有下面這一行，都會報錯
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'
複製代碼

apply()

apply方法攔截函數的調用、call和apply操做。
apply方法能夠接受三個參數，分別是目標對象、目標對象的上下文對象（this）和目標對象的參數數組。

const proxy = new Proxy( {}, {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments);
  }
});
複製代碼

攔截示例

var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
};
function sum (left, right) {
  return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
複製代碼

直接調用Reflect.apply方法，也會被攔截。

Reflect.apply(proxy, null, [9, 10]) // 38
複製代碼

has()

has方法用來攔截HasProperty操做（注意不是HasOwnProperty，即has方法不判斷一個屬性是對象自身的屬性，仍是繼承的屬性。），即判斷對象是否具備某個屬性時，這個方法會生效。典型的操做就是in運算符。能夠接受兩個參數，分別是目標對象、需查詢的屬性名。
用於隱藏某些屬性

// 隱藏_開頭的屬性
var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false
複製代碼

has攔截對for...in循環不生效。

let stu1 = {name: '張三', score: 59};
let stu2 = {name: '李四', score: 99};

let handler = {
  has(target, prop) {
    if (prop === 'score' && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

'score' in oproxy1
// 張三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 張三
// 59

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// 李四
// 99
複製代碼

construct()

construct方法用於攔截new命令，下面是攔截對象的寫法。能夠接受三個參數:目標對象、構造函數的參數對象、創造實例對象時，new命令做用的構造函數。construct方法返回的必須是一個對象，不然會報錯。

var handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};

var p = new Proxy(function () {}, {
  construct: function(target, args) {
    console.log('called: ' + args.join(', '));
    return { value: args[0] * 10 };
  }
});

(new p(1)).value
// "called: 1"
// 10

var p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 1;
  }
});

new p() // 報錯
// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')
複製代碼

deleteProperty()

deleteProperty方法用於攔截delete操做，若是這個方法拋出錯誤或者返回false，當前屬性就沒法被delete命令刪除。目標對象自身的不可配置（configurable）的屬性，不能被deleteProperty方法刪除，不然報錯。

var handler = {
  deleteProperty (target, key) {
    delete target[key];
    return true;
  }
};

var target = { prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
複製代碼

defineProperty()

defineProperty()方法攔截了Object.defineProperty()操做。若是目標對象不可擴展（non-extensible），則defineProperty()不能增長目標對象上不存在的屬性，不然會報錯。另外，若是目標對象的某個屬性不可寫（writable）或不可配置（configurable），則defineProperty()方法不得改變這兩個設置。

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不會生效
複製代碼

getOwnPropertyDescriptor()

攔截Object.getOwnPropertyDescriptor()，返回一個屬性描述對象或者undefined。

var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }
複製代碼

getPrototypeOf()

方法主要用來攔截獲取對象原型，返回值必須是對象或者null，不然報錯。
若是目標對象不可擴展（non-extensible）， getPrototypeOf()方法必須返回目標對象的原型對象。
攔截下面這些操做:
1. Object.prototype.proto
2. Object.prototype.isPrototypeOf()
3. Object.getPrototypeOf()
4. Reflect.getPrototypeOf()
5. instanceof

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true
複製代碼

isExtensible()、preventExtensions()和setPrototypeOf()

相同點
- 這三個方法只能返回布爾值，不然會被自動轉爲布爾值。

不一樣點

isExtensible()方法有一個強限制，它的返回值必須與目標對象的isExtensible屬性保持一致，不然就會拋出錯誤。

var p = new Proxy({}, {
  isExtensible: function(target) {
    console.log("called");
    return true;
  }
});

Object.isExtensible(p)
// "called"
// true

// 報錯
var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});

Object.isExtensible(p)
// Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')
複製代碼

preventExtensions()方法有一個限制，只有目標對象不可擴展時（即Object.isExtensible(proxy)爲false），proxy.preventExtensions才能返回true，不然會報錯。爲了防止出現這個問題，一般要在proxy.preventExtensions()方法裏面，調用一次Object.preventExtensions()。

var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});

Object.preventExtensions(proxy)
// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible

// 糾正後
var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});

Object.preventExtensions(proxy)
// "called"
// Proxy {}
複製代碼

setPrototypeOf()若是目標對象不可擴展（non-extensible），setPrototypeOf()方法不得改變目標對象的原型。

var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden
複製代碼

ownKeys()

ownKeys()方法用來攔截對象自身屬性的讀取操做。具體來講，攔截如下操做。
1. Object.getOwnPropertyNames()
2. Object.getOwnPropertySymbols()
3. Object.keys()
4. for...in循環
使用Object.keys()方法時，有三類屬性會被ownKeys()方法自動過濾，不會返回。目標對象上不存在的屬性、屬性名爲 Symbol 值、不可遍歷（enumerable）的屬性。

使用限制（很重要）

ownKeys()方法返回的數組成員，只能是字符串或 Symbol 值。若是有其餘類型的值，或者返回的根本不是數組，就會報錯。**

var obj = {};

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return [123, true, undefined, null, {}, []];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 123 is not a valid property name
複製代碼

若是目標對象自身包含不可配置的屬性，則該屬性必須被ownKeys()方法返回，不然報錯。

var obj = {};
Object.defineProperty(obj, 'a', {
  configurable: false,
  enumerable: true,
  value: 10 }
);

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return ['b'];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a'
複製代碼

目標對象是不可擴展的（non-extensible），這時ownKeys()方法返回的數組之中，必須包含原對象的全部屬性，且不能包含多餘的屬性，不然報錯。

var obj = {
  a: 1
};

Object.preventExtensions(obj);

var p = new Proxy(obj, {
  ownKeys: function(target) {
    return ['a', 'b'];
  }
});

Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible
複製代碼

Proxy.revocable()

Proxy.revocable()方法返回一個對象，該對象的proxy屬性是Proxy實例，revoke屬性是一個函數，能夠取消Proxy實例。

let target = {};
let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked
複製代碼

當執行revoke函數以後，再訪問Proxy實例，就會拋出一個錯誤。
Proxy.revocable()的一個使用場景是，目標對象不容許直接訪問，必須經過代理訪問，一旦訪問結束，就收回代理權，不容許再次訪問。

`this`問題

當proxy代理後，this的指向會發生變化。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true
複製代碼

一個例子，因爲this指向的變化，致使 Proxy 沒法代理目標對象。

const _name = new WeakMap();

class Person {
  constructor(name) {
    _name.set(this, name);
  }
  get name() {
    return _name.get(this);
  }
}

const jane = new Person('Jane');
jane.name // 'Jane'

const proxy = new Proxy(jane, {});
proxy.name // undefined

=> // 增長get攔截
const proxy = new Proxy(jane, {
  get(target, prop) {
    console.log('prop', prop)
    if (prop === 'name') {
      return target.name
    }
    return Reflect.get(target, prop);
  }
});
proxy.name // Jane
複製代碼

有些原生對象的內部屬性，只有經過正確的this才能拿到，因此 Proxy 也沒法代理這些原生對象的屬性。這時，this綁定原始對象，就能夠解決這個問題。

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);

proxy.getDate();
// TypeError: this is not a Date object.

// 在get中綁定this
const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);

proxy.getDate() // 
複製代碼

vue3使用Proxy替換defineProperty

Object.defineProperty
1. Object.defineProperty沒法監控到數組下標的變化，致使直接經過數組的下標給數組設置值，不能實時響應。通過vue內部處理後可使用如下幾種方法來監聽數組push()、pop()、shift()、unshift()、splice()、sort()、reverse()，因爲只針對了以上八種方法進行了hack處理,因此其餘數組的屬性也是檢測不到的，仍是具備必定的侷限性。
2. Object.defineProperty只能劫持對象的屬性,所以咱們須要對每一個對象的每一個屬性進行遍歷。
Proxy
1. 能夠劫持整個對象，並返回一個新對象。
2. 有 13 種劫持操做。

Reflect

ES6-Reflect

將Object對象的一些明顯屬於語言內部的方法（好比Object.defineProperty），放到Reflect對象上。
修改某些Object方法的返回結果，讓其變得更合理。好比，Object.defineProperty(obj, name, desc)在沒法定義屬性時，會拋出一個錯誤，而Reflect.defineProperty(obj, name, desc)則會返回false。

// 老寫法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新寫法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
複製代碼

讓Object操做都變成函數行爲。某些Object操做是命令式，好比name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數行爲。

// 老寫法
'assign' in Object // true

// 新寫法
Reflect.has(Object, 'assign') // true
複製代碼

Reflect對象的方法與Proxy對象的方法一一對應，只要是Proxy對象的方法，就能在Reflect對象上找到對應的方法。每個Proxy對象的攔截操做（get、delete、has、...），內部都調用對應的Reflect方法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

ES6經常使用但被忽略的方法（第四彈）

Proxy

使用方式

攔截操做

get()

set()

apply()

has()

construct()

deleteProperty()

defineProperty()

getOwnPropertyDescriptor()

getPrototypeOf()

isExtensible()、preventExtensions()和setPrototypeOf()

ownKeys()

Proxy.revocable()

this問題

vue3使用Proxy替換defineProperty

Reflect

`this`問題