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

你的好友上線了發表於2018-06-14
JavaScript物件程式設計

目的

  1. 什麼是物件導向程式設計
  2. 複習關鍵字new並且理解它所做的四件事
  3. 在我們的程式碼中使用建構函式來優化我們得程式碼
  4. 使用call和apply來重構建構函式

物件導向程式設計的定義

  1. 基於物件概念的程式設計模式
  2. 這些物件是由類建立的，我們可以把類想象成一個藍圖，把這些物件叫做類的例項
  3. 儘量讓類抽象化和模組化

JavaScript中的物件導向程式設計

JavaScript 中沒有內建的類,但是我們可以用函式和物件去模擬

1. 建立物件

想象我們要建立一些house物件,他們都有 bedrooms, bathrooms, numSqft 屬性

var house = {
  bedrooms: 2,
  bathroom: 2,
  sqFeet: 1000
}

var house1 = {
  bedrooms: 2,
  bathroom: 2,
  sqFeet: 1000
}

var house2= {
  bedrooms: 2,
  bathroom: 2,
  sqFeet: 1000
}
// 想象一下 我們如果有 1000個房子
複製程式碼

解決辦法 建立一個函式來構建這些類似的“房子”物件，而不是建立無數個不同的物件

1.建構函式

讓我們使用一個函式作為每個房子應該是什麼的藍圖——我們把這些函式稱為“建構函式”

  function House(bedrooms, bathrooms, numSqft){
    this.bedrooms = bedrooms
    this.bathrooms = bathrooms
    this.numSqft = numSqft
  }
複製程式碼

注意一些事:

  • 函式名的大小寫
  • 關鍵字this!!!
  • 我們將屬性附加到關鍵字“this”上。我們希望關鍵字“this”指的是我們將從建構函式函式中建立的物件，我們該如何做呢?

2.使用建構函式建立物件

  function House(bedrooms,bathrooms,numSqft) {
    this.bedrooms = bedrooms
    this.batnrooms = bathrooms
    this.numSqft = numSqft
  }
  // test
  var firstHouse = Houes(2,2,1000)
  firstHouse //undefined ....
複製程式碼

為什麼不起作用！！

  • 我們沒有從函式中返回任何東西所以我們的House函式返回沒有定義的
  • 我們沒有顯式地繫結關鍵字'this'或將它放在宣告的物件中。這意味著關鍵字“This”的值將是全域性物件，這不是我們想要的!

解決辦法 使用關鍵字new

  function House(bedrooms,bathrooms,numSqft) {
    this.bedrooms = bedrooms
    this.batnrooms = bathrooms
    this.numSqft = numSqft
  }
  // test
  var firstHouse = new House(2,2,1000);
  firstHouse.bedrooms; // 2
  firstHouse.bathrooms; // 2
  firstHouse.numSqft; // 1000
複製程式碼

思考關鍵字new做了什麼

  • 首先, 關鍵字new建立了一個新的空物件
  • 然後，它把關鍵字this設定到了這個空物件上
  • 新增一條 ‘return this’ 在函式的末尾
  • 執行原型連線操作 {它將一個屬性新增到名為“proto”的空物件上，這個空物件將建構函式上的prototype屬性連結到空物件上(後面會詳細介紹)}

練習 為Dog建立一個建構函式,每個Dog都有姓名(name),年齡(age)屬性, 還有bark方法

  function Dog(name, age) {
     this.name = name;
     this.age = age;
     this.bark = function() {
       console.log(this.name + ' 汪汪汪')
     }
  }

  // test 
  var dog1 = new Dog("小黃",1)
  var dog2 = new Dog("小美",2)

  dog1.bark() // 小黃 汪汪汪
  dog2.bark() // 小美 汪汪汪
複製程式碼

3.多個建構函式

分別為 Car 和 Motorcycle 建立一個建構函式

  function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.numWheels = 4
  }
複製程式碼
  function Motorcycle(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.numWheels = 2
  }
複製程式碼

摩托車的功能有重複。有沒有辦法“借用”汽車功能並在摩托車功能中呼叫它? 使call/apply

  function Car(make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
    this.numWheels = 4;
  }
  function Motorcycle(make, model, year){
    //using call
    Car.call(this, make, model, year)
    this.numWheels = 2
  }
  function Motorcycle(make, model, year){
    // using apply
    Car.apply(this, [make,model,year]);
    this.numWheels = 2;
  }

  function Motorcycle(){ 
     // 我們甚至不需要傳遞引數!
      // 更好的用法是使用apply和arguments
      Car.apply(this, arguments);
      this.numWheels = 2;
  }
複製程式碼

小結一下

  • 物件導向程式設計是一種基於物件被一種藍圖構建的模式，我們使用物件導向寫更多模組化和可共享的程式碼
  • 在支援OOP的語言中，我們將這些藍圖稱為“類”，而從它們建立的物件稱為“例項”
  • 由於我們在JavaScript中沒有內建的類支援，所以我們使用函式來模擬類。這些建構函式通過使用new關鍵字建立物件
  • 我們可以通過call或apply來避免多個建構函式中的重複

相關文章