在之前的文章中我們已經(jīng)介紹了JavaScript的繼承包含了ES5和ES6的版本。

ES5繼承 傳送門

ES6繼承 傳送門

今天我們介紹面向?qū)ο笫Ｏ碌亩鄳B(tài)和封裝

多態(tài)

在《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》中介紹到多態(tài)就是同一操作在不同對象上產(chǎn)生不同的解釋和執(zhí)行結(jié)果。

const Daye = function() {}
const Erye = function(){}
const daye = new Daye();
const erye = new Erye();


const getPeople = people => {
  if(people instanceof Daye){
    console.log('你是大爺')
  } else if (people instanceof Erye){
    console.log('你是二爺')
  }
}


getPeople(daye) // 你是大爺
getPeople(erye) // 你是二爺

這時候三爺來了我們就需要改getPeople代碼, 如果說今后代碼多了我們可能會出錯。
所以我們來改進(jìn)這個代碼，先把要變的抽象出來，因?yàn)槎鄳B(tài)就是對象的多態(tài)。

這里我們使用原型鏈

const Daye = function() {}
Daye.prototype.name = function(){
  console.log('你是大爺')
}

const Erye = function() {}
Erye.prototype.name = function(){
  console.log('你是二爺')
}

const daye = new Daye();
const erye = new Erye();


const getPeople = people => {
  people.name()
}


getPeople(daye)
getPeople(erye)

這樣我們隨便加好幾個都o(jì)k

當(dāng)然如果是對象的話我們也可以修改我們之前的代碼

<script type="text/javascript">
const daye = {
  name: ()=>{
    console.log('你是大爺')
  }
}
const erye = {
  name: ()=>{
    console.log('你是二爺')
  }
}


const getPeople = people => {
  if (people.name instanceof Function) {
    people.name()
  }
}


getPeople(daye)
getPeople(erye)

封裝

封裝就是將信息隱藏 在JS中我們可以用let或const定義作用域 或者用Symbol創(chuàng)建私有屬性

關(guān)于Symbol可以看我之前的文章

Symbol 傳送門

let聲明的變量只在其所在的代碼塊內(nèi)有效

for循環(huán)計(jì)數(shù)器是最適合let

如果在函數(shù)外就會報(bào)錯

let things = ['apple', 'pear', 'mongo']
for (let i = things.length - 1; i >= 0; i--) {
  console.log(i)
  console.log(things[i])
}
console.log(i) //  i is not defined