摘要：面向?qū)ο笕筇匦跃褪欠庋b繼承和多態(tài)，簡(jiǎn)單理解，對(duì)于貓這種動(dòng)物，它本身就是一個(gè)封裝好的類，你只需要供它吃喝輸入，它就能表現(xiàn)貓的行為輸出，同時(shí)它繼承了動(dòng)物所具有的習(xí)性吃東西等，而不同的貓因?yàn)樗幁h(huán)境或者習(xí)性的不同，可能會(huì)有不同的表現(xiàn)和行為，這就

面向?qū)ο笕筇匦跃褪欠庋b繼承和多態(tài)，簡(jiǎn)單理解，對(duì)于貓這種動(dòng)物，它本身就是一個(gè)封裝好的類，你只需要供它吃喝（輸入），它就能表現(xiàn)貓的行為（輸出），同時(shí)它繼承了動(dòng)物所具有的習(xí)性（吃東西等~），而不同的貓因?yàn)樗幁h(huán)境或者習(xí)性的不同，可能會(huì)有不同的表現(xiàn)和行為，這就是多態(tài)。

封裝
把客觀事物封裝成抽象的類，隱藏屬性和方法的實(shí)現(xiàn)細(xì)節(jié)，僅對(duì)外公開接口。

① 在ES6之前，沒(méi)有class這個(gè)概念，借由原型對(duì)象和構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)

function Cat(name, food) {
  this.name = name // 公有屬性
  this.food = food
}
Cat.prototype.say = function() { // 公有方法
  console.log(this.name + " likes eating " + this.food)
}
Cat.see = function() {
  console.log("這是靜態(tài)方法，無(wú)需實(shí)例化可調(diào)用")
}
var cat = new Cat("Lazier","mouse")
cat.say() // 實(shí)例共享原型屬性和方法

② ES6的class

class Cat{
  constructor(name, food){
    this.name = name
    this.food = food
  }
  static see() {
    console.log("這是靜態(tài)方法，無(wú)需實(shí)例化可調(diào)用")
  }
  say(){
    console.log(this.name+" likes eating " + this.food)
  }
}
var cat = new Cat("Lazier","mouse")
cat.say()

以上class的基本實(shí)現(xiàn)原理如下 ↓

var Cat = function(){
  function Cat(name, food){
    this.name = name
    this.food = food
  }
  // 執(zhí)行掛載函數(shù)，創(chuàng)建類
  createClass(Cat,[{key:"say",value:function(){
    console.log(this.name+" likes eating " + this.food)
  }}],[{key:"see",value:function(){
    console.log("這是靜態(tài)方法，無(wú)需實(shí)例化可調(diào)用")}])
}

// 定義對(duì)象屬性
let defineProperties = function(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i]
    Object.defineProperty(target, descriptor.key, descriptor)
  }
}   
// 掛載函數(shù)，將靜態(tài)或動(dòng)態(tài)方法分別掛載到Cat和Cat的prototype上
var createClass = function({
  return function(Constructor,protoProps,staticProps){
    if(protoProps){ // 原型方法
      defineProperties(Constructor.prototype,protoProps)
    }
    if(staticProps){ // 靜態(tài)方法
      defineProperties(Constructor,staticProps)
    }
  }
})

了解面向?qū)ο蟮墓小⑺接?、靜態(tài)屬性和方法可以看下面這篇文章的總結(jié)

js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解

繼承
子類可以使用父類的所有功能，并且對(duì)這些功能進(jìn)行擴(kuò)展。繼承的過(guò)程，就是從一般到特殊的過(guò)程。

js實(shí)現(xiàn)繼承有多種方式

原型鏈繼承

// 將子類的prototype指向父類的實(shí)例
function Parent(){}
function Son(){}
Son.prototype = new Parent()
// * 把Son的原型對(duì)象的constructor指向Son，解決類型判斷問(wèn)題
Son.prototype.constructor = Son
借助構(gòu)造函數(shù)繼承(使用call和apply實(shí)現(xiàn)繼承)
function Parent(){}
function Son(){
    // 將父類函數(shù)中的this，強(qiáng)行綁定為子類的this
    // 可傳參
    Parent.call(this, arguments);
}
組合繼承
// 原型屬性方法由原型鏈實(shí)現(xiàn)繼承，實(shí)例屬性方法由借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承
// 這樣，在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性
function Parent(name){
    this.name = name
}
function Son(name, age){
    // 繼承父類的實(shí)例屬性方法，之后再添加自己的實(shí)例屬性方法
    Parent.call(this, name);
    this.age = age
}
Son.prototype = new Parent()
// 重寫Son的原型對(duì)象
Son.prototype.constructor = Son

var demo = new Son("jacksonzhou", 23)
寄生式組合繼承 – 現(xiàn)在最常用的繼承方法
// 獲得父類原型屬性方法的副本，解決組合繼承的屬性重復(fù)問(wèn)題
function inheritPrototype(son, parent) {
    var prototype = object(parent.prototype)
    prototype.constructor = son
    son.prototype = prototype
}

function Parent(name){
    this.name = name
}
function Son(name, age){
    Parent.call(this, name)
    this.age = age
}
Son.prototype = inheritPrototype(Son, Parent)

var demo = new Son("jacksonzhou", 23)

多態(tài)
同一操作用在不同對(duì)象上，可以產(chǎn)生不同的解釋和不同的執(zhí)行結(jié)果

var makeSound=function(animal){
  animal.sound()
}
// 聲明狗的構(gòu)造函數(shù)
var Dog=function(){}
Dog.prototype.sound=function(){
  console.log("汪汪汪")
}
// 聲明貓的構(gòu)造函數(shù)
var Cat=function(){}
Cat.prototype.sound=function(){
  console.log("喵喵喵")
}
// 分別調(diào)用他們的叫法
makeSound(new Dog())
makeSound(new Cat())
// 非多態(tài)寫法
var makeSound=function(animal){
  if(animal instanceof Dog){
    console.log("汪汪汪")
  }else if(animal instanceof Cat){
    console.log("喵喵喵")
  }
}
var Dog=function(){}
var Cat=function(){}
// 分別調(diào)用他們的叫法
makeSound(new Dog())
makeSound(new Cat())
// 很明顯，后續(xù)有其他動(dòng)物加入都要去修改makeSound函數(shù)，很不優(yōu)雅！
這里要介紹下方法重載

方法重載是讓類以統(tǒng)一的方式處理不同類型數(shù)據(jù)的一種手段。表現(xiàn)為多個(gè)同名函數(shù)同時(shí)存在，但具有不同的參數(shù)個(gè)數(shù)或類型。調(diào)用方法時(shí)通過(guò)傳遞給它們的不同參數(shù)個(gè)數(shù)和參數(shù)類型來(lái)決定具體使用哪個(gè)方法, 這也是一種多態(tài)性。

其實(shí)js本身并沒(méi)有這個(gè)概念，但我們可以通過(guò)操作參數(shù)的類數(shù)組arguments，根據(jù)該類數(shù)組的長(zhǎng)度以及其元素的類型來(lái)選擇不同的實(shí)現(xiàn)，來(lái)模擬實(shí)現(xiàn)函數(shù)重載效果

// js的函數(shù)參數(shù)相當(dāng)靈活~可理解成一個(gè)動(dòng)態(tài)的類數(shù)組
// 不加參數(shù)，調(diào)用時(shí)有傳入?yún)?shù)也不會(huì)報(bào)錯(cuò)
function countCat(){ 
  if(arguments.length==1){ 
    console.log(`這是一只貓,${arguments[0]}`)
  } 
  else if(arguments.length==2){ 
    console.log(`這是兩只貓,${arguments[0]}和${arguments[1]}`)
  } 
  else{
    console.log("沒(méi)貓了~")
  } 
} 
countCat()
countCat("Tom")
countCat("Tom","Mary")