Javascript 物件導向程式設計(二)

目的

• 理解什麼是原型物件
• 描述和理解__proto__、原型和建構函式之間的關係。
• 在原型物件上新增方法和屬性，以編寫更有效的程式碼
• 解釋向原型新增方法和屬性與建構函式之間的區別
• 通過prototype物件實現JavaScript中的繼承

關鍵字new

我們之前使用了new關鍵字來從建構函式中建立物件——讓我們回顧一下它的作用

• 建立一個空物件
• 將“this”的值賦給該物件
• 在函式最後新增“return this”
• 在這些新物件和建構函式的原型屬性上建立一個連線(傳說中的原型鏈) 現在我們專注於第四點，看看原型鏈到底是什麼

一個圖例

圖例說明

• 每一個建構函式都有一個叫做prototype(原型)的屬性,原型屬性的值時一個物件
• 這個原型物件有一個叫做constructor的屬性,它指向這個建構函式
• 每次當一個物件用new關鍵字建立的時候,會產生一個"proto" (原型鏈),它會把這個物件和建構函式的原型屬性連線
• 每一個建構函式都有一個叫做原型的屬性,原型屬性的值時一個物件

程式碼說明

  function Person(name,age){
    this.name = name;
    this.age = age
  }
  var p1 = new Person("p1",12)
  var p2 = new Person("p2",22)
  p1.__proto__ === Person.prototype  // true
  p2.__proto__ === Person.prototype  // true
  Person.prototype.constructor === Person; // true
複製程式碼

原型

原型的位置:原型被建構函式建立,由所有被該建構函式建立的物件共享！！

  // 建構函式
  function Person(name){
    this.name = name;
  }
  // 由Person建構函式建立一個物件
  var p1 = new Person("小美")
  var p2 = new Person("小李")

  Person.prototype.isInstructor = true;
  p1.isInstructor; //true
  p2.isInstructor; //true
 // 我們為什麼可以訪問原型的屬性  
 // __proto__!!
複製程式碼

原型鏈

JavaScript 中如何找到方法和屬性？ 圖例說明

重構程式碼

既然我們知道由同一個建構函式建立的物件有一個共享的原型，讓我們重構一些程式碼:

  function Person(name) {
    this.name = name
  }
  Person.prototype.sayHi = function() {
    return "Hi " + this.name
  }
  var p1 = new Person("dd")
  p1.sayHi() // Hi dd
複製程式碼

自我測試

• 建立一個建構函式Vehicle:從這個建構函式建立的每個物件都應該有一個make、model和year屬性。每個物件還應該有一個名為isRunning的屬性，該屬性應該設定為false
• 從Vehicle建構函式建立的每個物件都應該具有一個名為turnOn的函式，該函式將isRunning屬性更改為true
• 從Vehicle建構函式中建立的每個物件都應該有一個名為turnOff的函式，它將isRunning屬性更改為false。
• 從Vehicle建構函式建立的每個物件都應該有一個名為honk的方法，該方法只在isRunning屬性為true時返回字串“beep”

測試程式碼

  function Vehicle(make, model,year) {
    this.make = make
    this.model = model
    this.year = year
    this.isRunning = false
  }
  Vehicle.prototype.turnOn = function () {
    this.isRunning = true
  }
  Vehicle.prototype.turnOff = function () {
    this.isRunning = false
  }
  Vehicle.prototype.honk = function () {
    if (this.isRunning === true) {
      return 'beep'
    }
  }

複製程式碼