对象多态笔记

一段多态的javascript代码

var makeSound = function(animal) {
    if (animal instanceof Duck) {
      console.log('嘎嘎嘎')
    }
    if (animal instanceof Chicken) {
      console.log('咯咯咯')
    }
  }

  var Duck = function() {}
  var Chicken = function() {}

  makeSound(new Duck())
  makeSound(new Chicken())

多态背后的思想是将“做什么”和“谁去做已经怎么做”分离开来，也就是将不变得事物和可能改变的事物分离开来。

下面是改写后的代码：

  var makeSound = function(animal) {
    animal && animal.sound()
  }

  var Duck = function () { }
  
  Duck.prototype.sound = function() {
    console.log('嘎嘎嘎')
  }

  var Chicken = function () { }
  
  Chicken.prototype.sound = function() {
    console.log('咯咯咯')
  }

  makeSound(new Duck()) // 嘎嘎嘎
  makeSound(new Chicken()) // 咯咯咯

再看一个

  var googleMap = {
    show: function() {
      console.log('开始渲染谷歌地图')
    }
  }

  var baiduMap = {
    show: function() {
      console.log('开始渲染百度地图')
    }
  }

  var renderMap = function(type) {
    if (type === 'googleMap') {
      googleMap.show()
    }
    if (type === 'baiduMap') {
      baiduMap.show()
    }
  }

  renderMap('googleMap')
  renderMap('baiduMap')

我们还是先把程序中相同的部分抽离处理，那就是显示某个地图：

 var googleMap = {
    show: function() {
      console.log('开始渲染谷歌地图')
    }
  }

  var baiduMap = {
    show: function() {
      console.log('开始渲染百度地图')
    }
  }

  var renderMap = function(map) {
    if (map && map.show instanceof Function) {
      map.show()
    }
  }

  renderMap(googleMap)
  renderMap(baiduMap)

对象多态性提示我们，做什么和怎么去做是可以分开的，即使以后增加了搜搜地图，renderMap函数仍然不需要做任何改变

  var googleMap = {
    show: function() {
      console.log('开始渲染谷歌地图')
    }
  }

  var baiduMap = {
    show: function() {
      console.log('开始渲染百度地图')
    }
  }

  var sosoMap = {
    show: function () {
      console.log('开始渲染搜搜地图')
    }
  }

  var renderMap = function(map) {
    if (map && map.show instanceof Function) {
      map.show()
    }
  }

  renderMap(googleMap)
  renderMap(baiduMap)
  renderMap(sosoMap)