本文例項講述了JavaScript面向物件三個基本特徵。分享給大家供大家參考，具體如下：

瞭解過面向物件的同學應該都知道，面向物件三個基本特徵是：封裝、繼承、多型，但是對於這三個詞具體可能不太瞭解。對於前端來講接觸最多的可能就是封裝與繼承，對於多型來說可能就不是那麼瞭解了。

封裝

在說封裝之先了解一下封裝到底是什麼？

什麼是封裝

封裝：將物件執行所需的資源封裝在程式物件中——基本上，是方法和資料。物件是“公佈其介面”。其他附加到這些介面上的物件不需要關心物件實現的方法即可使用這個物件。這個概念就是“不要告訴我你是怎麼做的，只要做就可以了。”物件可以看作是一個自我包含的原子。物件介面包括了公共的方法和初始化資料。（節選自百度百科）

我對於封裝的理解，可能還有一個步驟就是抽離，首先你要清楚在一個對程式碼中你應該抽離那些屬性方法，有了這些為基礎才能更好的做好封裝。

封裝無非就是其屬性和方法封裝。

1. 類：封裝物件的屬性和行為
2. 方法：封裝具體邏輯功能
3. 訪問封裝：訪問修飾封裝無非就是對其訪問許可權進行封裝

class Employees {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  getInfo(){
    let {name,age} = this;
    return {name,age};
  }
  static seyHi(){
    console.log("Hi");  
  }
}

let lisi = new Employees("Aaron",18);
lisi.seyHi();  // lisi.seyHi is not a function
lisi.getInfo(); // {name: "Aaron",age: 18}
Employees.seyHi(); // Hi

在Employees中抽出的公共屬性有name,age,公共方法有getInfo,seyHi，然而getInfo與seyHi所不同的是seyHi使用了static修飾符，改變其為靜態方法，seyHi只屬於Employees這個類。然而getInfo方法則是屬於例項的。

這裡使用了static對seyHi方法對其進行了訪問許可權的封裝。

再舉一個例子。

Promise.then() // Promise.then is not a function
let p1 = new Promise(() => {})
p1.then(); // Promise {<pending>}
Promise.all([1]);  // Promise {<resolved>: Array(1)}

從上面的程式碼中可以看出Promise也使用了static對其方法的訪問許可權進行了封裝。

繼承

繼承：說到繼承並不太陌生，繼承可以使得子類具有父類的各種的公有屬性和公有方法。而不需要再次編寫相同的程式碼。在令子類別繼承父類別的同時，可以重新定義某些屬性，並重寫某些方法，即覆蓋父類別的原有屬性和方法，使其獲得與父類別不同的功能。（節選自百度百科）

子類繼承父類後，子類具有父類屬性和方法，然而也同樣具備自己所獨有的屬性和方法，也就是說，子類的功能要比父類多或相同，不會比父類少。

class Employees {
  constructor(name){
    this.name = name;
  }
  getName(){
    console.log(this.name)
  }
  static seyHi(){
    console.log("Hi");  
  }
}
class Java extends Employees{
  constructor(name){
    super(name);
  }
  work(){
    console.log("做後臺工作");
  }
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();  // java.seyHi is not a function

從上面的例子可以看出繼承不會繼承父類的靜態方法，只會繼承父類的公有屬性與方法。這一點需要注意。

子類繼承之後既擁有了getName方法，同樣也擁有自己的worker方法。

多型

多型：按字面的意思就是“多種狀態”，允許將子類型別的指標賦值給父類型別的指標。（節選自百度百科）

說白了多型就是相同的事物，一個介面，多種實現，同時在最初的程式設定時，有可能會根據程式需求的不同，而不確定哪個函式實現，通過多型不需要修改原始碼，就可以實現一個介面多種解決方案。

多型的表現形式重寫與過載。

什麼是重寫

重寫：子類可繼承父類中的方法，而不需要重新編寫相同的方法。但有時子類並不想原封不動地繼承父類的方法，而是想作一定的修改，這就需要採用方法的重寫。方法重寫又稱方法覆蓋。（節選自百度百科）

class Employees {
  constructor(name){
    this.name = name;
  }
  seyHello(){
    console.log("Hello")
  }
  getName(){
    console.log(this.name);
  }
}
class Java extends Employees{
  constructor(name){
    super(name);
  }
  seyHello(){
    console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
  }
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();  // Hello
java.seyHello();  // Hello,我的名字是Leo,我是做Java工作的。
employees.getName();  // Aaron
java.getName(); // Leo

通過上面的程式碼可以看出Java繼承了Employees,然而子類與父類中都存在seyHello方法，為了滿足不同的需求子類繼承父類之後重寫了seyHello方法。所以在呼叫的時候會得到不同的結果。既然子類繼承了父類，子類也同樣擁有父類的getName方法。

什麼是過載

過載就是函式或者方法有相同的名稱，但是引數列表不相同的情形，這樣的同名不同引數的函式或者方法之間，互相稱之為過載函式或者方法。（節選自百度百科）

class Employees {
  constructor(arg){
    let obj = null;
    switch(typeof arg)
    {
      case "string":
         obj = new StringEmployees(arg);
         break;
      case "object":
         obj = new ObjEmployees(ObjEmployees);
         break;
      case "number":
        obj = new NumberEmployees(ObjEmployees);
        break;
    }
    return obj;
  }
}
class ObjEmployees {
  constructor(arg){
    console.log("ObjEmployees")
  }
}
class StringEmployees {
  constructor(arg){
    console.log("StringEmployees")
  }
}
class NumberEmployees {
  constructor(arg){
    console.log("NumberEmployees")
  }
}
new Employees({})  // ObjEmployees
new Employees("123456") // StringEmployees
new Employees(987654)  // NumberEmployees

因為JavaScript是沒有過載的概念的所以要自己編寫邏輯完成過載。

在上面的程式碼中定義了Employees,ObjEmployees,StringEmployees,NumberEmployees類,在例項化Employees的時候在constructor裡面進行了判斷，根據引數的不同返回不同的對應的類。

這樣完成了一個簡單的類過載。

總結

1. 封裝可以隱藏實現細節，使得程式碼模組化；
2. 繼承可以擴充套件已存在的程式碼模組（類），它們的目的都是為了——程式碼重用。
3. 多型就是相同的事物，呼叫其相同的方法，引數也相同時，但表現的行為卻不同。多型分為兩種，一種是行為多型與物件的多型。

在程式設計的是多多運用這個寫思想對其程式設計時很有用的，能夠使你的程式碼達到高複用以及可維護。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。