深入理解ES6中的Reflect用法

1、深入理解ES6中的Reflect法Reflects象是一個全局的普通的對象。Reflec的原型就是ect我們首先來驗證下看看Reflec的原型是否是e基t本代碼如下：letconsole.log(Reflect._proto_=Ototype：;/trueconsole.log(obj._proto_=Reflect._proto_：;/truelettconsole.log(str._proto_：;/String,length:0,constructReflec是ES6為了操作對象而新增的為什么要添加Reflec對象呢？它這樣設計的目的是為了什么？1將對象的一些明顯屬于語

2、言內(nèi)部的方法比如ectefe,放到Reflec對象上，那么以后我們就可以從Reflec對象上可以拿到語言內(nèi)部的方法。2)在使用對象的Object.defi但是使用Reflect.define,rone,ropertye時，如果出現(xiàn)異常的話，e會拋出一個錯誤，需要使用t則會返回fl。eec（去捕獲,比如舊的寫法如下：tryObject.define,roperty(tarcatch(e：/失/敗get,property,attributes：;/新/寫法if(Reflect.define,roperty(target,property,attributes：cceelefle等等這些考慮，所以就

3、新增了這個靜態(tài)對象。Reflec對象一共有個靜態(tài)方法。:Reflectetteteecee該方法是用來讀取一個對象的屬性。參數(shù)如下解析：t目標對象是我們要讀取的屬性。ece可選：可以理解為上下文t對象。先看如下e來理解下Reflect的e方法的使用如下：cteeetclelteclelconsole.lReflect.getle.log(Reflect.geteefe先執(zhí)行方法打印和然后在打印efi因為該函數(shù)沒有返回值le.lReflect.get/*會執(zhí)行xxx()方法，打印happy,因此第三個參數(shù)指向上下文就指向了這個對象，然后打印-，最后打印undefined因為該函數(shù)沒有返回值*/c

4、onsole.log(Reflect.get(obj,xxx,name:happy);/*會執(zhí)行xxx()方法，打印undefined,因此第三個參數(shù)指向上下文就指向了這個對象，而這個對象里面又沒有name屬性，因此會打印undefined然后打印-，最后打印undefined.因為該函數(shù)沒有返回值*/console.log(Reflect.get(obj,xxx,age:happy);constobj2=name:kongzhi2,age:30,getxxx()console.log();console.log(xxxx-);return0;/*先執(zhí)行obj2該對象中的xx

5、x方法，指定了第三個參數(shù)作為該上下文對象，因此會打印happy2,然后繼續(xù)打印xxxx-，最后我們可以看到有返回值為0，因此打印0了*/console.log(Reflect.get(obj2,xxx,name:happy2);二：Reflect.set(target,name,value,receiver)上面的get方法是獲取對象中的值，那么set就是設置該對象的屬性值了，參數(shù)解析簡單如下：target:我們需要操作的對象。name:我們需要設置該對象的屬性名。value:我們要設置的屬性值。receiver:可以理解為上下文this對象。如果我們在設置值的時候遇至到setter函數(shù)，該參

6、數(shù)就指向與setter中上下文this對象。該函數(shù)會返回一個Boolean的值，代表在目標對象上設置屬性是否成功。如下代碼演示：constobj=age:30,setname(name)console.log(this);console.log();constres=Reflect.set(obj,age,31);console.log(res);/trueconsole.log(obj);/age:31,setname:function這樣的console.log(obj.age);/打印31/*如下代碼，設置obj對象中的name屬性，因此打印console.log(this)返回age:

7、31,setname:function這樣的，console.log(res2)返回true，設置成功*/constres2=Reflect.set(obj,name,xxxx);console.log(res2);/true/*先執(zhí)行set中的name方法，打印console.log(this);this就指向了第四個參數(shù)test:test然后會打印;*/constr2=Reflect.set(obj,name,dreamapple,test:test);/this:-test:testconsole.log(r2);/trueconsole.log(obj);/name:Setter,ag

8、e:31三：Reflect.apply(target,thisArg,args)該方法的含義是：通過指定的參數(shù)列表對該目標函數(shù)的調(diào)用。該方法類似于我們之前的Ftotype.apply方法的。參數(shù)解析如下：target:我們的目標函數(shù).thisArg:target函數(shù)調(diào)用的時候綁定的this對象。args:就是函數(shù)參數(shù)列表。如下代碼demo演示：/查找數(shù)組里面最小的元素值constarrs=1,2,3,4;/ES6的語法如下constmin=Reflect.apply(Math.min,arrs,arrs);console.log(min);/1/ES5的語法如下：cons

9、tmin2=Math.min.apply(arrs,arrs);console.log(min2);/1/或者我們使用Ftotype代碼如下演示constmin3=Ftotype.apply.call(Math.min,arrs,arrs);console.log(min3);/1/下面是截取字符串的方法演示下conststrs=kongzhi;/使用ES6的語法代碼演示如下：conststr1=Reflect.apply(Stotype.slice,strs,0,3);console.log(str1);/打印kon/使用ES5的

10、語法conststr2=strs.slice(0,3);console.log(str2);/打印kon/或者我們使用Stotype代碼如下演示conststr3=Stotype.slice.apply(strs,0,3);console.log(str3);/kon四：Reflect.construct(target,args,newTarget)該方法的作用和newAAA()創(chuàng)建一個實列方法作用類似，那么使用該方法，我們就可以提供一種不使用new來調(diào)用構造函數(shù)的方法，參數(shù)含義如下：target:被運行的目標函數(shù)。args:調(diào)用構造函數(shù)傳遞的參數(shù)數(shù)組或偽數(shù)

11、組。newTarget:也是構造函數(shù)，表示使用Reflect.construct后生成的實列對象是誰的實列。如果沒有該參數(shù)，默認生成的實列對象就和target構造函數(shù)是一樣的。代碼演示如下：functionXXXX(name)=name;XXXX.prototype.getName=function();functionYYYY(age)this.age=age;YYYY.prototype.getAge=function()returnthis.age|31;/使用XXXX函數(shù)作為構造函數(shù),那么構造函數(shù)就指向了XXXX函數(shù)constxxxx=R

12、eflect.construct(XXXX,xx);console.log(xxxx);/打印XXXXname:xxconsole.log(xxxx.getName();/打印xx如下圖所示：XXXXname:name:11xx11_proto_:gethlame:f()constructor:fXXXX(name)_proto_:Object/使用YYYY函數(shù)作為構造函數(shù)，那么構造函數(shù)就指向了YYYY函數(shù)constyyyy=Reflect.construct(XXXX,30,YYYY);console.log(yyyy);/打印YYYYname:30console.log(

13、);/30console.log(yyyy.age);/undefinedconsole.log(yyyyinstanceofYYYY);/trueconsole.log(yyyyinstanceofXXXX);/falseconsole.log(yyyy.getAge();/31如上demo所示：當constxxxx=Reflect.construct(XXXX,xx)沒有第三個參數(shù)的時候，那么構造函數(shù)指向了XXXX函數(shù)。我們繼續(xù)看第二個demo,constyyyy=Reflect.construct(XXXX,30,YYYY);有第三個參數(shù)，因此yyyy的實列指向了YYYY.如上代碼打印的

14、信息看到console.log(yyyyinstanceofYYYY);返回true,console.log(yyyyinstanceofXXXX);返回false.但是呢console.log(yyyy.getAge();返回的是31.如果我們沒有默認的31值的話，那么就應該返回undefined了，可以看到，請看下面的注意總結(jié)：注意：如果有第三個參數(shù)的話，那么我們的實列由兩部分組成，實列的屬性部分由第一部分構造函數(shù)生成。實列的方法由第三個參數(shù)對象生成。比如上面打印的console.log(yyyy);/打印YYYYname:30看到只返回了XXXX中的name屬性，XXXX中的getNam

15、e方法并沒有拿到。同理如上console.log(yyyy.age);為undefined,console.log(yyyy.getAge();返回了31.如下圖所示：YYYYname:“蒯name:|130_proto_:getAge:f()constructor:fYYYY(age)_proto_.:Object五:Reflect.defineProperty(target,name,desc)該方法與Object.defineProperty方法類似的，不過唯一的區(qū)別是Reflect.defineProperty返回值是一個Boolean的值。比如如下基本的代碼比較：constobj=;

16、/使用Object.definePropertytryObject.defineProperty(obj,a,value:22)catch(e)console.log(definepropertyfailed);/使用Reflect.definePropertyconstres=Reflect.defineProperty(obj,b,configurable:true,enumerable:true);console.log(res);/true既然兩者的用法是一樣的，那配置項也是一樣的，那這邊就不多介紹了，只是返回值不一樣而已，那么Object.defineProperty的具體用法，因此

17、總結(jié)一下：如果使用Object.defineProperty的屬性定義失敗了，就會拋出一個錯誤，成功的話就會返回這個對象；Reflect.defineProperty如果定義屬性失敗的話就會返回false，如果成功定義的話，就會返回true。但是如果使用Reflect.defineProperty函數(shù)，它的第一個參數(shù)不是對象的話，也會拋出錯誤。六：Reflect.deleteProperty(target,name)該方法用于刪除一個對象上的屬性，它和delete操作符類似的。參數(shù)如下：target:表示要操作的對象。name:表示要刪除該對象上的屬性。該函數(shù)返回值是一個Boolean的值，如

18、果成功的話，返回true，失敗的話返回false。比如如下demo演示：constobj=name:kongzhi,age:30;lettest1=Reflect.deleteProperty(obj,name);console.log(test1);/trueconsole.log(obj);/age:30/如果刪除對象上不存在的屬性的話，也是返回true的lettest2=Reflect.deleteProperty(obj,xx);console.log(test2);/trueconsole.log(obj);/age:30lettest3=Reflect.deleteProperty

19、(obj,age);console.log(test3);/trueconsole.log(obj);/七：Reflect.has(target,name)該方法的含義是：檢查一個對象上是否含有特定的屬性。相當于JS5中的in操作符。那么參數(shù)target:就是改對象哦，name的含義是：該對象上的屬性。具體的demo演示如下：/一般的對象constobj=name:kongzhi,age:30;console.log(Reflect.has(obj,name);/trueconsole.log(Reflect.has(obj,username);/該對象上沒有username屬性返回false

20、console.log(Reflect.has(obj,age);/true/函數(shù)的實列functionObj(name)=name;Ototype.getName=function();consttest=newObj();/使用in操作符測試console.log(nameintest);/trueconsole.log(getNameintest);/true/使用Reflect.has測試console.log(Reflect.has(test,name);/trueconsole.log(Reflect.has(test,g

21、etName);/true八：Reflect.ownKeys(target)該函數(shù)的作用是：返回由目標對象自身的屬性鍵組成的數(shù)組。如果這個目標對象不是一個對象的話，那么該函數(shù)就會拋出一個異常。target參數(shù)：它是一個對象。如下代碼演示：constobj=name:kongzhi,age:30;console.log(Reflect.ownKeys(obj);/name,age;九：Reflect.preventExtensions(target)該方法的作用是阻止新的屬性添加到對象中去。target參數(shù)必須是一個對象，否則的話會拋出一個異常。如下代碼演示：constobj=;/判斷該對象是否

22、可以擴展，使用Reflect.isExtensible該方法constt1=Reflect.isExtensible(obj);console.log(t1);/true/使用Reflect.preventExtensions來阻止該對象擴展Reflect.preventExtensions(obj);/再來擴展下該對象，看是否可以constt2=Reflect.isExtensible(obj);console.log(t2);/false十：Reflect.isExtensible(target)該方法的作用是檢查一個對象是否可以擴展的，也就是說對象里面是否可以添加新的屬性或方法。targ

23、et參數(shù)表示目標對象。如果該目標對象不是一個對象的話，那么函數(shù)會拋出一個異常。該函數(shù)會返回一個Boolean值，如果為true的話，說明該對象可以擴展，否則的話返回false，表示該對象不可以擴展。如下demo來演示下：constobj=;/判斷該對象是否可以擴展，使用Reflect.isExtensible該方法constt1=Reflect.isExtensible(obj);console.log(t1);/true/使用Reflect.preventExtensions來阻止該對象擴展Reflect.preventExtensions(obj);/再來擴展下該對象，看是否可以const

24、t2=Reflect.isExtensible(obj);console.log(t2);/false一：Reflect.getOwnPropertyDescriptor(target,name)該方法的參數(shù)如下解析：target:表示的是目標對象。name:表示目標對象的屬性該方法的具體含義是：如果目標對象中的屬性描述符存在的話，就返回這個屬性描述符，如果不存在，就返Undefined。如下demo演示：constobj=;Reflect.defineProperty(obj,name,configurable:true,enumerable:true,writable:true,value

25、:30);consttest1=Reflect.getOwnPropertyDescriptor(obj,name);/*打印值如下：configurable:trueenumerable:truevalue:30writable:true*/console.log(test1);consttest2=Reflect.getOwnPropertyDescriptor(obj,age);console.log(test2);/undefined/如果第一個參數(shù)不是對象consttest3=Object.getOwnPropertyDescriptor(kkkk,name);console.log(test3);/undefined/使用trycatch包圍，會執(zhí)行catch方法內(nèi)部代碼tryconsttest4=Reflect.getOwnPropertyDescriptor(kkkk,name);console.log(test4);catch(e)console.log(error);十二：Reflect.getPrototypeOf(target)該方法是返回一個對象的原型的，也就是說內(nèi)部的Prototype屬性