Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

4. 使用物件

35 views

Published on

掌握this參考
運用物件實字
認識物件協定
使用符號協定

Published in: Technology
  • Be the first to comment

  • Be the first to like this

4. 使用物件

  1. 1. 4.使用物件 • 學習目標 – 掌握this參考 – 運用物件實字 – 認識物件協定 – 使用符號協定 2
  2. 2. 特性與undefined • 試圖存取物件上不存在的特性時,會傳回 undefined • 請問這個物件存不存在x特性呢? 3
  3. 3. • 「特性名稱不存在」與「特性值被設為 undefined」是兩件不同的事 • 避免將物件的特性值設為undefined • 陣列的索引其實是數字為名稱的特性,空 項目則是連數字特性都不存在 4
  4. 4. • 建議別去修改陣列的length • JavaScript中的API,對陣列空項目的處理 方式並不一致 5
  5. 5. • 更嚴格的檢驗 6
  6. 6. 函式與this • 物件在本質上,就像個特性的集合體 • 函式是一級值,也就可以將函式指定給物 件成為特性 7
  7. 7. 8
  8. 8. 9
  9. 9. • this實際參考的對象,是以呼叫方式而定 10
  10. 10. • 如果函式原本具有參數,可接續在第一個 參數之後 11
  11. 11. • 如果有一組引數,必須在多次呼叫間共用, 就可以使用apply()方法 12
  12. 12. • 改變this參考的對象 13
  13. 13. • 函式實例有個bind()方法,執行結果傳回 新函式 • 新函式的this綁定對象,會固定為呼叫 bind()時指定的物件 14
  14. 14. 15
  15. 15. • 部份函式(Partial function) • 對於一個單純就是函式,不需使用到this 的需求下,建議將this設為undefined 16
  16. 16. 全域物件 • Number、Math、Array等API是作為全域 物件的特性存在 • 在不同的環境中想要取得全域物件,會透 過不同的名稱 • 在Node.js中… 17
  17. 17. • 若呼叫函式時,無法透過.運算、call()、 apply()等方法確定this的對象,在嚴格 模式下this會是undefined 18
  18. 18. 箭號函式與this • 箭號函式在this方面的解析方式,與函式 實字不同 19
  19. 19. • 箭號函式中的this是依當時的語彙 (Lexical)環境來綁定 20
  20. 20. • 箭號函式一旦綁定了this,就不會再改變 21
  21. 21. 物件實字增強 22
  22. 22. 23
  23. 23. 24
  24. 24. • 定義設值方法(Setter)、取值方法 (Getter) 25
  25. 25. 解構(Destructuring) 26
  26. 26. • 只要是可迭代的物件,也就是具有可傳回 迭代器的特性,都可以運用解構 27
  27. 27. 餘集(Rest) 28
  28. 28. • 如果可迭代的元素個數少於變數的數量, 那麼多出來的變數會是undefined • 如果可迭代的元素個數少於變數的數量, 也可以指定變數的預設值 29
  29. 29. • 如果只對某幾個元素有興趣呢? • 如果只對尾端元素有興趣 30
  30. 30. • 實現類似Python風格的變數置換 31
  31. 31. 打散(Spread) 32
  32. 32. • 物件也可以解構 • 變數還可以指定預設值 33
  33. 33. • 解構語法也可以用在函式的參數上… 34
  34. 34. • 在ES9時,物件也可以用餘集語法 • 將物件的特性打散 35
  35. 35. valueOf() • 在需要基本型態的場合時會呼叫,而且必 須傳回基本型態值 • 預設的valueOf()只傳回實例本身 36
  36. 36. 37
  37. 37. • 如果是有點年份的API,例如,早期就存在 的API,必須確認行為是否符合預期 38
  38. 38. • 對於必須取得基本型態字串的場合,可以 定義物件的toString()方法 39
  39. 39. 符號 • 從ES6開始,基本資料型態多了一個符號 (symbol) • 為了建立獨一無二的行為象徵而存在 • 對符號值使用typeof,會傳回'symbol' 40
  40. 40. • 被指定的說明文字,ES10以後可以從 Symbol的description特性取得,而且 會成為toString()方法的傳回字串內容 41
  41. 41. • 全域註冊表 – 要將建立的符號值保存到註冊表,或者從註冊 表取得已建立的符號,可以透過 Symbol.for()函式 • 主要是為了開發者自訂協定而存在,務必 小心謹慎,制定好名稱規範,避免協定衝 突問題 42
  42. 42. • 可以使用Symbol.keyFor()傳回它在全 域符號註冊表中的鍵,也就是符號描述字 串,如果傳回字串就表示已登錄符號 43
  43. 43. 運用標準符號 • 在試圖使用Symbol.for()建立自訂協定 前,應該先看看是否有適用的標準符號 • Symbol.iterator • Symbol.toPrimitive 44
  44. 44. Symbol.iterator • 用於迭代器協定的符號 • 陣列就定義了Symbol.iterator方法 45
  45. 45. 46
  46. 46. 47
  47. 47. • 對於簡單迭代,使用產生器語法方便許多 48
  48. 48. Symbol.toPrimitive • 定義了Symbol.toPrimitive方法的物件, 在需要取得基本型態的情況,會使用 Symbol.toPrimitive方法而不是 valueOf() 49
  49. 49. 50
  50. 50. • 為物件定義特性或方法時,預設是可列舉 的,就算使用符號,也是可列舉的 • 然而符號不會被for..in列舉,不過,使 用in測試的話會是true 51
  51. 51. • 定義設值、取值方法時,對象也可以是 Symbol 52

×