ES6之Reflect你肯定不須要了解？

什麼是Reflect?

---

ES6 爲了操做對象而提供的新API,將來的新方法將只部署在Reflect對象上！

初探Reflect

Reflect與Proxy是相輔相成的，只要是Proxy對象的方法，就能在Reflect對象上找到對應的方法！

const obj = { name: "song" };
const proxy = new Proxy(obj, {
  get(target, name) {
    // reflect保證原生行爲可以正常執行
    return Reflect.get(target, name);
  },
  set(target, name, value) {
    return Reflect.set(target, name, value);
  },
  has(target, name) {
    // 經過in操做符會調用has方法
    return Reflect.has(target, name);
  }
});
// reflect 將原有的命令式 都轉化爲函數行爲
console.log("name" in proxy);
console.log(Reflect.has(proxy, "name")); // 也能夠直接經過Reflect來判斷
複製代碼

Reflect靜態方法

Reflect對象一共有 13 個靜態方法。咱們依次用老寫法和新寫法作對比！

1.Reflect.get

獲取對象中對應key的值

const my = {
    name:'song',
    age:18,
    get mny(){
        return this.a + this.b
    }
}
console.log(my['age']); // 老寫法
console.log(Reflect.get(my,'age'));
console.log(Reflect.get(my,'mny',{a:1,b:2})); // 能夠指定this指向
複製代碼

2.Reflect.set

設置對象中key對應的值

const my = {
  name: "song",
  age: 18,
  set mny(val) {
    this.value = val;
  }
};
let mny = { value: 0 };
my.mny = 100; // 老寫法
Reflect.set(my, "mny", 100);
Reflect.set(my, "mny", 100, mny); // 給對象設置屬性,而且傳遞this
console.log(mny); // {value:100}
複製代碼

3.Reflect.has

判斷某個key是否屬於這個對象

const my = {
    name:'song'
}
console.log('name' in my);
console.log(Reflect.has(my,'name'));
複製代碼

4.Reflect.defineProperty

定義對象的屬性和值，等價於Object.defineProperty

const person = {};
Object.defineProperty(person,'name',{
    configurable:false,
    value:'song'
});
console.log(person.name); // 老寫法，後續會被廢棄

Reflect.defineProperty(person,'name',{
    configurable:false,
    value:'song'
})
console.log(person.name);
複製代碼

5.Reflect.deleteProperty

刪除對象中某個屬性

const person = {};
Reflect.defineProperty(person,'name',{
    configurable:false,
    value:'song'
});
// delete person.name; 無返回值
const flag = Reflect.deleteProperty(person,'name');
console.log(flag); // 返回是否刪除成功
複製代碼

6.Reflect.construct

實例化類，等價於new

class Person{
    constructor(sex){
        console.log(sex);
    }
}
new Person('女'); // 老寫法
Reflect.construct(Person,['男']);
複製代碼

7.Reflect.getPrototypeOf

讀取proto，等價於Object.getPrototypeOf，不一樣的是若是方法傳遞的不是對象會報錯！

class Person {}
// 老寫法
console.log(Object.getPrototypeOf(Person) === Reflect.getPrototypeOf(Person));
複製代碼

8.Reflect.setPrototypeOf

設置proto，等價於Object.setPrototypeOf，不一樣的是返回一個boolean類型表示是否設置成功！

let person = {name:'song'};
let obj = {age:18};
// Object.setPrototypeOf(person,obj); // 老寫法
Reflect.setPrototypeOf(person,obj);
console.log(person.age);
複製代碼

9.Reflect.apply

想必apply方法你們都很瞭解了, Reflect.apply 等價於Function.prototype.apply.call

const func = function(a,b){
    console.log(this,a,b);
}
func.apply = () =>{
    console.log('apply')
}
// func.apply({name:'song'},[1,2]); // 調用的是本身身上的方法
Function.prototype.apply.call(func,{name:'song'},[1,2]); // 老寫法
Reflect.apply(func,{name:'song'},[1,2]); // 是否是很是的簡單!
複製代碼

10.Reflect.getOwnPropertyDescriptor

等價於Object.getOwnPropertyDescriptor，獲取屬性描述對象

const obj = {name:1};
// const descriptor = Object.getOwnPropertyDescriptor(obj,'name'); // 老寫法
const descriptor = Reflect.getOwnPropertyDescriptor(obj,'name');
console.log(descriptor);
複製代碼

11.Reflect.preventExtensions

讓一個對象變的不可擴展，也就是永遠不能再添加新的屬性，等價於 Object.preventExtensions

const person = {};
// 舊寫法
Object.preventExtensions(person); // 設置對象不可擴展
Reflect.preventExtensions(person);
person.a = 1;
console.log(person.a); // undefined
複製代碼

12.Reflect.isExtensible

表示當前對象是否可擴展，等價於Object.isExtensible

const person = {};
Reflect.preventExtensions(person);
Object.isExtensible(person) // 老寫法 false
Reflect.isExtensible(person) // false
複製代碼

13.Reflect.ownKeys

用於返回對象的全部屬性，包括Symbol屬性

const person = {
    age:18,
    [Symbol('name')]:'song'
};
console.log(Object.getOwnPropertyNames(person)); // [ 'age' ] 老寫法
console.log(Object.getOwnPropertySymbols(person)); // [ Symbol(name) ] 老寫法
console.log(Reflect.ownKeys(person)); // [ 'age', Symbol(name) ]
複製代碼

到此咱們把Reflect的全部用法已經講解完畢，內容比較幹！其實核心就是將原有的Object的部分方法放到了Reflect上，至於難度徹底沒看到！

---