>[success] # 反射和代理 -- Reflect/ Proxy ~~~ 1.在了解這兩個之前需要知道'JavaScript' 規范以及引擎都帶有一系列'內部方法', 例如'[[Get]]' '[[Set]]' '[[propertype]]' 等這種用雙'[]'包裹的屬性，這類屬性被叫做 '內部槽和內部方法(Internal slots)',它們不是對象屬性不能作為 JavaScript 代碼的 屬性直接訪問,ECMAScript 引擎中的每個對象都與一組定義其運行時行為的內部方 法相關聯。這些內部方法不是 ECMAScript 語言的一部分。它們由本規范定義，純粹 是為了說明目的。但是，ECMAScript 實現中的每個對象都必須按照與其關聯的內部 方法所指定的行為,簡單的說js 是運行在引擎上這些引擎可能是通過其他語言或者其他方式 實現的，當在調用對象屬性例如'Object.getPrototype'他其實需要去映射到引擎對'內部屬性' 引擎會調用 '[[GetPrototypeOf]]' 內部方法，并且返回 '[[Prototype]]' 內插槽的值,不同的引擎 可能'內部插槽和內部方法'實現不一樣他們都需接受相同規范規則 2.簡單說內部插槽和內部方法有助于實現對象的一致行為和實現者（JavaScript引擎）可 以通過查看規范來正確提供這些實現,這些屬性或方法由 JavaScript 引擎實現，但它們是 從運行時抽象出來的，因此您將無法像普通屬性一樣在對象上訪問它們 3.下表總結了規范使用的一些'內部插槽和內部方法' ~~~ | 內部方法 | 簽名 | 描述 | | --- | --- | --- | | \[\[GetPrototypeOf\]\] | ( ) → Object / Null | 確定為該對象提供繼承屬性的對象。`null`表示沒有繼承屬性。[Object.getPrototypeOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf) | | \[\[SetPrototypeOf\]\] | (Object / Null) → Boolean | 將此對象與提供繼承屬性的另一個對象相關聯。傳`null`表示沒有繼承屬性。返回`true`表示操作成功，返回`false`表示操作失敗。（[Object.setPrototypeOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf)） | | \[\[IsExtensible\]\] | ( ) → Boolean | 確定是否允許向該對象添加其他屬性。（對應[Object.isExtensible()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)） | | \[\[PreventExtensions\]\] | ( ) → Boolean | 控制新屬性是否能被加入對象內。返回`true`表示操作成功，返回`false`表示操作失敗。（PS：如果為`false`，即使`[[IsExtensible]]`為`true`，添加新屬性操作也會失敗。[Object.preventExtensions()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)） | | \[\[GetOwnProperty\]\] | (propertyKey) → Undefined /[Property Descriptor](https://github.com/lizhongzhen11/lizz-blog/issues/48#PropertyDescriptor) | 返回此對象自身屬性的屬性描述符，如果沒有對應的屬性，返回`undefined`。[Object.getOwnPropertyDescriptor()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)和[Object.getOwnPropertyDescriptors()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors) | | \[\[DefineOwnProperty\]\] | (propertyKey, PropertyDescriptor) → Boolean | 創建或更改自己的屬性，該屬性對應傳入的`propertyKey`，屬性描述符對應傳入的`PropertyDescriptor`。如果操作成功返回`true`，否則返回`false`。（對應[Object.defineProperty()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)和[Object.defineProperties()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties)） | | \[\[HasProperty\]\] | (propertyKey) → Boolean | 返回一個布爾值，該值指示此對象是否其自身已具有或繼承的鍵為傳入的`propertyKey`的屬性。（對應[Object.prototype.hasOwnProperty()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)） | | \[\[Get\]\] | (propertyKey, Receiver) → any | 返回對象中屬性名為參數`propertyKey`的值。如果必須執行ECMAScript代碼來找到屬性值，參數`Receiver`會被當作`this`來用。 | | \[\[Set\]\] | (propertyKey, value, Receiver) → Boolean | 將參數`value`設置為對象中屬性名為參數`propertyKey`的值。參數`Receiver`會被當作`this`來用。如果操作成功返回`true`，否則返回`false`。 | | \[\[Delete\]\] | (propertyKey) → Boolean | 刪除對象中屬性名為參數`propertyKey`的屬性。刪除成功返回`true`，否則返回`false`。（類似js中的`delete`關鍵字） | | \[\[OwnPropertyKeys\]\] | ( ) →[List](https://github.com/lizhongzhen11/lizz-blog/issues/48#list)of propertyKey | 返回一個列表，其元素都是對象自己的所有屬性鍵。（[Object.getOwnPropertyNames()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)和[Object.getOwnPropertySymbols()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols)） | * 函數對象所支持的其他基本內部方法： | 內部方法 | 簽名 | 描述 | | --- | --- | --- | | \[\[Call\]\] | (any, a List of any) → any | 執行與此對象關聯的代碼。通過函數調用表達式調用。第一個參數`any`表示`this`，`a List of any`表示傳入的參數列表。實現此內部方法的對象是可調用的。 | | \[\[Construct\]\] | (a List of any, Object) → Object | 創建一個對象。通過`new`或`super`操作調用。`a List of any`表示包含運算符參數的列表。第二個參數`Object`表示`new`操作的初始應用對象。實現該內部方法的對象稱為`constructors`。函數對象不一定要有`constructor`并且非構造函數對象沒有`[[Construct]]`內部方法。 | >[info] ## Reflect ~~~ 1.'Reflect'對象不是函數對象。它沒有'[[Construct]]'內部方法。不能將Reflect對象與new運 算符一起用作構造函數。Reflect對象也沒有'[[Call]]'內部方法。不能將Reflect對象作為函數 調用,因此在使用時候只是調用 'Reflect' 的靜態方法,使用'Reflect' 往往是'Reflect.靜態方法(target,其他參數)' 這樣'target'對象的一些內部方法或者內插槽的屬性就會被訪問,Reflect 實際上是所有那些僅通過 JavaScript 引擎內部可用的“內部方法”的集合 2.如果你已經使用過'Reflect' 和 'Object' 在對'內部方法或者內插槽'上很多地方能做的事情都類似，出于向后兼 容的目的，Object上的靜態方法不太可能消失，為什么會單獨出現'Relfect',使用單個對象來容納這些方法是保持 JavaScript 其余部分整潔的 3.如圖兩個實現說明可以看出實際映射對應的'內插槽' ~~~ * Object 的isExtensible實現說明  * Reflect 的isExtensible實現說明  >[info] ## Proxy ~~~ 1.用法上'new Proxy(target, handler)',其中'handler' 這個參數構造對象上的屬性其實都對應Reflect proxy = new Proxy({}, { apply: Reflect.apply, construct: Reflect.construct, defineProperty: Reflect.defineProperty, getOwnPropertyDescriptor: Reflect.getOwnPropertyDescriptor, deleteProperty: Reflect.deleteProperty, getPrototypeOf: Reflect.getPrototypeOf, setPrototypeOf: Reflect.setPrototypeOf, isExtensible: Reflect.isExtensible, preventExtensions: Reflect.preventExtensions, get: Reflect.get, set: Reflect.set, has: Reflect.has, ownKeys: Reflect.ownKeys, }); ~~~ >[info] ## 參考 [tc39.es插槽定義](https://tc39.es/ecma262/#sec-object-internal-methods-and-internal-slots) [ecmascript 6 - Are internal slot and internal methods actually implemented by JavaScript engines? - Stack Overflow](https://stackoverflow.com/questions/60119316/are-internal-slot-and-internal-methods-actually-implemented-by-javascript-engine/60123171#60123171) [【譯】JavaScript中的 "Internal Slots" 和 "Internal Methods" 到底是什么？](https://juejin.cn/post/7059344609473724430)