9. meta-programming
Download as PPTX, PDF0 likes370 views
此文档探讨了元编程的概念，特别是在JavaScript中的应用，涵盖了反射API和代理API的使用，以及如何通过这些工具修改对象行为和访问内部方法。它详细说明了各种对象属性的定义、类型判断及相等性比较的机制，并提供了如何利用反射和代理实现更灵活的编程模式的实例。文档强调了ES6后的新特性，特别是reflect和proxy带来的编程便利。
![• [[OwnPropertyKeys]]規範如何取得自身
特性，也定義了順序
– 會先考慮數字索引，以數字遞增方式取得，接
著是特性被建立的順序，然後才是符號被建立
的順序
• 採用的函式有…
– Object.getOwnPropertyNames()
– Object.getOwnPropertySymbols()
– Reflect.ownKeys()
13](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-13-320.jpg)
![Object.prototype.toString()
• ECMAScript規範要求呼叫後，必須傳回
'[object class]'格式的字串
17](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-17-320.jpg)
![• 基於對標準的支持，不少程式庫也會使用
這個來作為標準內建型態的判斷依據
• ES5以前，沒有方式可以調整'[object
class]'格式中'class'的部份
• Object.prototype.toString()實際
上是取得引擎內部實作[[Class]]的資訊
18](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-18-320.jpg)
![• ES6在定義建構或類別時，可以定義
Symbol.toStringTag特性，決定
'[object class]'格式'class'的部份
19](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-19-320.jpg)
![真陣列？
• Array.isArray()就是根據內部實作特
性[[Class]]的值'Array‘
• 在ES5剛釋出的那個年代，若想修補
Array.isArray()該怎麼做呢？
21](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-21-320.jpg)
![• 真正的Array.isArray()看的是[[Class]]
22](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-22-320.jpg)
![Reflect與Proxy
• ECMAScript規範[[GetPrototypeOf]]、
[[SetPrototypeOf]]、[[IsExtensible]]等
• 在實現JavaScript引擎時，這類演算實現為
引擎的內部方法（Internal method）
• 在ES5時，可以存取內部方法的API，隨意
地配置為Object的函式
31](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-31-320.jpg)
![進階函式控制
• func.apply(self, args)這類呼叫，
隱含地假設func實例本身沒有定義
apply()方法
• 若想不想發生同名問題，方式之一是使用
Function.prototype.apply.apply(
func, [self, args])
37](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-37-320.jpg)
![• Reflect.get()或Reflect.set()存取
的是[[GET]]、[[SET]]內部方法
• 純綷用來當成是存取特性值也是可行的
41](https://image.slidesharecdn.com/ch09-191118004406/85/9-meta-programming-41-320.jpg)
9. meta-programming
- 2. 9. meta-programming • 學習目標 – 探索物件特性 – 判斷物件型態 – 認識Reflect API – 結合Proxy與Reflect API 2
- 3. • meta前置詞源於希臘文，原本相當於之後 （after）、超越（beyond）之意 • 後續衍生出許多意義，像是關於（about） – metadata是「與資料相關的資料」（data about data） 3
- 4. • meta-programming可以對比為「與程式 設計相關的程式設計」（programming about programming） • 不同於靜態的data，programming是動態 的，「meta-programming從事的程式設 計，會影響另一個程式設計」 4
- 6. 修補API 6
- 7. • 要運用這種手法，必須是特性值不會被設 為Falsy family成員的情況 • 如果無法避免這類情況，必須做更嚴格的 檢查 7
- 8. 8
- 10. • Object.keys() • Object.values() • Object.entries() 10
- 12. 特性順序 • EnumerateObjectProperties規範只從實 例本身以及原型鏈取得可列舉特性，for in就是實作之一 • 沒有規範順序排列問題，因此for in列舉 的特性順序因不同引擎實作而有所差別 • Object.keys()的順序是依賴在實作品 12
- 13. • [[OwnPropertyKeys]]規範如何取得自身 特性，也定義了順序 – 會先考慮數字索引，以數字遞增方式取得，接 著是特性被建立的順序，然後才是符號被建立 的順序 • 採用的函式有… – Object.getOwnPropertyNames() – Object.getOwnPropertySymbols() – Reflect.ownKeys() 13
- 14. 物件型態 • 對於基本型態、函式、undefined、 Function實例的話，許多場合會使用 typeof，對於其他的物件型態 • 如果想判斷物件是否屬於某個繼承關係， 常見使用instanceof • 在沒有進一步定義下，instanceof的判 斷依據是原型鏈 14
- 16. constructor特性 • 不是個別實例擁有，而是建構式或類別 prototype上的特性 • 也常見作為型態檢測的依據 • constructor可以修改 • 使用原型鏈實現繼承時，建議設定 constructor指向子建構式 • 使用類別語言定義子類別時，會自動設定 constructor特性 16
- 18. • 基於對標準的支持，不少程式庫也會使用 這個來作為標準內建型態的判斷依據 • ES5以前，沒有方式可以調整'[object class]'格式中'class'的部份 • Object.prototype.toString()實際 上是取得引擎內部實作[[Class]]的資訊 18
- 20. 20
- 21. 真陣列？ • Array.isArray()就是根據內部實作特 性[[Class]]的值'Array‘ • 在ES5剛釋出的那個年代，若想修補 Array.isArray()該怎麼做呢？ 21
- 24. 24
- 25. 25
- 26. 物件相等性 • == • === • SameValueZero • SameValue 26
- 27. • Set元素、Map的鍵在比較相等性時，使用 SameValueZero演算 – 採用===，然而NaN等於NaN，0等於-0。 • SameValue演算與SameValueZero演算不 同的地方只在於，0不等於-0， 27
- 31. Reflect與Proxy • ECMAScript規範[[GetPrototypeOf]]、 [[SetPrototypeOf]]、[[IsExtensible]]等 • 在實現JavaScript引擎時，這類演算實現為 引擎的內部方法（Internal method） • 在ES5時，可以存取內部方法的API，隨意 地配置為Object的函式 31
- 32. • ES6以後，提供了Reflect API作為存取內 部方法的統一管道，並提供更多的控制細 節 • ES6以後也新增Proxy API，提供了干涉內 部方法的時機點，可干涉的點與Reflect API一對一對應 • 透過Proxy與Reflect的各種結合，就可 為 meta-programming提供諸多的可能性 32
- 33. Reflect API • Object被取代的函式 – Reflect.getPrototypeOf() – Reflect.setPrototypeOf() – Reflect.isExtensible() – Reflect.preventExtensions() – Reflect.defineProperty() – Reflect.getOwnPropertyDescriptor() 33
- 34. • 與Object上相對應的函式，功能上基本相 同 • 略作調整的地方 – Object有些對應的函式執行完會傳回物件本 身，而Reflect會傳回布林值 – Object對應的函式target參數若是基本型態， 會使用對應的類別實例來包裹基本型態值，然 而，Reflect在此時會拋出TypeError 34
- 36. 36
- 37. 進階函式控制 • func.apply(self, args)這類呼叫， 隱含地假設func實例本身沒有定義 apply()方法 • 若想不想發生同名問題，方式之一是使用 Function.prototype.apply.apply( func, [self, args]) 37
- 38. • ES6以後，可以使用Reflect.apply()來 達到相同目的 • Reflect.apply(func, self, args) 38
- 43. • 非嚴格模式下，對於不可組態的特性， delete刪除失敗會傳回false，若是嚴格 模式，刪除失敗會引發TypeError • Reflect.deleteProperty() 成功的 話會傳回true，刪除失敗會傳回false 43
- 47. Proxy API • 希望能在存取物件特性時進行 console.log()，記錄有哪些特性被存取了？ • Proxy實例會捕捉（Trap）並呼叫處理器上 定義的對應方法 47
- 48. 48
- 50. • 實作上提供代理物件給客戶端操作，代理 物件具有與目標物件相同介面 • 在客戶端對實作毫不知情下，不會意識到 正在操作的是代理物件 • 代理物件可以單純地將任務轉發給目標物 件，或者是在這前後附加額外的邏輯 50
- 52. 52
- 53. this又是誰？ 53
- 54. 54
- 55. 55
- 56. 56
- 57. 57