Successfully reported this slideshow.
Your SlideShare is downloading. ×

5. 建構式、原型與類別

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
4. 使用物件
4. 使用物件
Loading in …3
×

Check these out next

1 of 61 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Recently uploaded (20)

5. 建構式、原型與類別

  1. 1. 5.建構式、原型與類別 • 學習目標 – 認識建構式之作用 – 理解原型鏈機制 – 區別原型與類別典範 – 善用類別語法 2
  2. 2. 封裝物件建構流程 3
  3. 3. 4
  4. 4. 定義建構式 5
  5. 5. 6
  6. 6. • 如果建構式使用return指定了傳回值,該 傳回值就會被當作建構的結果 7
  7. 7. • 有些函式既可以當作建構式,也可以作為 一般函式呼叫 • ES6新增了new.target 8
  8. 8. 模擬static • Math.PI • Number.MIN_SAFE_INTEGER • Number.isSafeInteger() 9
  9. 9. 私有性模擬 10
  10. 10. 11
  11. 11. 12
  12. 12. 特性描述器 • 從ES5開始,每個特性都會有四個屬性 – value – writable – enumerable – configurable 13
  13. 13. • Object.getOwnPropertyDescriptor ()傳回的物件只是描述 14
  14. 14. • 若某屬性未曾設定過,那麼預設是false 15
  15. 15. • 陣列的length無法列舉 • 直接對物件新增特性,writable、 enumerable、configurable預設是 true • 當特性本身其實是個方法時,也會被 for..in列舉 16
  16. 16. 17
  17. 17. 不可變動的陣列 18
  18. 18. 19
  19. 19. 擴充、彌封、凍結 • Object.preventExtensions() • Object.isExtensible() • Object.seal() • Object.freeze() 20
  20. 20. 建構式與prototype • 每個函式實例都會有個prototype特性, 基本上是Object的實例 • 不過prototype物件的constructor特 性會參考函式本身 21
  21. 21. • 使用new建構的物件,會有個__proto__ 特性參考至建構式的prototype特性 22
  22. 22. • 存取物件的特性時,會先在實例本身尋找, 如果有就使用 • 沒有的話,就會看看實例的原型物件上有 沒有該特性 • 各個實例間共用的特性,可以定義在建構 式的prototype 23
  23. 23. 24
  24. 24. 25
  25. 25. • 如果要在原型上新增特性,建議將特性設 為不可列舉 26
  26. 26. 27
  27. 27. • 想要知道實例本身是否擁有某個特性,可 以透過hasOwnProperty()方法 28
  28. 28. 29
  29. 29. 30
  30. 30. • 可以將類陣列變得更像是陣列 • 終究不是陣列 • instanceof用來確認物件是否為某建構 式的實例,某些程度上並不可靠 31
  31. 31. • 想要確認某個建構式的prototype,是否 為某實例的原型 32
  32. 32. • 如果不想要修改__proto__來指定原型 33
  33. 33. • Object.create()函式會建立新物件, 物件的原型將被設為指定的原型物件 34
  34. 34. 原型鏈 • 存取物件的特性時,會先在實例本身尋找 • 看看實例的原型物件上有沒有該特性 • 看看原型物件的原型物件有沒有該特性 • 持續到Object.prototype為止, 35
  35. 35. • JavaScript被稱為基於原型(Prototype- based)的物件導向語言 • ES6以後提供了模擬類別的語法,然而,這 並不改變JavaScript基於原型的本質 36
  36. 36. 37
  37. 37. 基於原型的繼承 38
  38. 38. 39
  39. 39. 40
  40. 40. 41
  41. 41. 42
  42. 42. 重新定義方法 • 如果想寫個drawFight()函式… • 在多數的情況下,檢查型態而給予不同的 流程行為,對於程式的維護性有著不良的 影響,應該避免 43
  43. 43. • 單純地定義toString()? 44
  44. 44. 45
  45. 45. 46
  46. 46. 47
  47. 47. 定義類別 • 本質上JavaScript仍是基於原型的物件導向 • ES6的類別語法,主要是提供標準化的類別 模擬,透過語法蜜糖令程式碼變得簡潔 48
  48. 48. 49
  49. 49. • 使用class定義的Account只能使用new 來建立實例 • 直接以函式的呼叫方式,會發生 TypeError 50
  50. 50. 定義方法 51
  51. 51. 52
  52. 52. • 類別上定義的設值、取值方法預設是不可 列舉 53
  53. 53. 54
  54. 54. • 若方法前加上static,那麼該方法會是個 靜態方法 55
  55. 55. • 在類別的static方法中若出現this,代 表的是類別本身 56
  56. 56. 實作繼承 57
  57. 57. • 類別語法的繼承,能夠繼承標準API,而且 內部實作特性以及特殊行為也會被繼承 • 例如,可以繼承Array,子型態實例的 length行為,能隨著元素數量自動調整 58
  58. 58. • 如果沒有使用constructor定義建構式, 會自動建立預設建構式,並自動呼叫 super() • 要明確地使用super()來呼叫父類建構式, 不然new時會引發錯誤 59
  59. 59. 60
  60. 60. super與extends • 如果對原型夠瞭解,是可以來玩玩一些試 驗,接下來的內容純綷是探討,若不感興 趣,可以直接跳過,不會影響後續章節的 內容理解。 61

×