更好理解的面向对象的Javascript 1 —— 动态类型和多态

shusen 发布于2019-08-23 14:19 / 2567人阅读

摘要：动态类型语言和鸭子类型编程语言按照数据类型大体可分为静态类型语言和动态类型语言。鸭子类型的概念至关重要，比如一个对象有了属性，也可以依照下标来存取属性，这个对象就可以被当做数组来使用。

前言

曾经对Javascript的面向对象相关知识也有过了解，从各种博客、书籍上也学到了很多。但是最近在看《Javascript设计模式与开发实战》这本书时发现该书对这方面的知识点介绍的很易于理解，因此总结出该文章分享给大家，同时也作为自己日后复习的笔记。

动态类型语言和鸭子类型

编程语言按照数据类型大体可分为静态类型语言和动态类型语言。
静态类型语言就是指在编译时就已经确定了变量的类型，比如C++在声明变量时的int关键字。
动态类型语言的变量类型要在程序运行时被赋值后才能确定。
在Javascript中，我们在对一个变量赋值时，显然不需要考虑它的类型。因此，Javascript是一门经典的动态类型语言。

动态类型语言在实际编码时带来了很大的灵活性，我们可以尝试调用任意对象的任意方法，而不需要考虑它原本是否被设计拥有该方法。
这些都建立在鸭子类型的概念上，通俗的说法是“如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。”
好吧我知道你可能不太理解，我们可以通过一个故事来深入理解：

从前在Javascript王国里，有一个国王，他觉得世界上最美妙的声音就是鸭子的叫声，于是国王召集大臣，要组建一个100只鸭子组成的合唱团。但是大臣们找遍了全国，只找到了999只鸭子，最后大臣发现有一只非常特别的鸡，它的叫声跟鸭子一模一样，于是这只鸡就成为了合唱团的最后一员。

这个故事说明，国王只是想要鸭子的叫声，但它的主人是鸡还是鸭都不重要。我们只关注对象的行为，而不关注对象本身。
通过代码你可能能更好的的理解：

let duck = {
  duckSay: function () {
    console.log("ga")
  }
}

let chicken = {
  duckSay: function () {
    console.log("ga")
  }
}

// 合唱团
let choir = []

let joinChoir = function (animal) {
  if (animal && typeof animal.duckSay === "function") {
    choir.push(animal)
    console.log("加入合唱团成功")
  }
}

joinChoir(duck)  // 加入合唱团成功
joinChoir(chicken)  // 加入合唱团成功

我们发现，只要动物拥有duckSay方法，它就可以加入合唱团，而并不关心它到底是谁。
鸭子类型的概念至关重要，比如一个对象有了length属性，也可以依照下标来存取属性，这个对象就可以被当做数组来使用。（这里可以思考我们在处理函数传入的参数arguments时的一些操作）

多态

多态是指同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。也就是给不同对象发送同一消息，会有不同的反馈。
这里我们依旧通过一个故事来讲解：

主人家里养了两只动物，一只鸡和一只鸭，当主人发出叫的命令时，鸭会gagaga的叫，而鸡会gegege的叫。

上面的故事用代码实现就是：

let makeSound = function (animal) {
  if (animal instanceof Duck) {
    console.log("ga")
  } else if (animal instanceof Chicken) {
    console.log("ge")
  }
}

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

makeSound(new Duck())  // ga
makeSound(new Chicken())  // ge

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开，即将“不变的事情”和“可变的事情”分离开。这样的程序是可生长的，也是符合开放-封闭原则。
因此我们可以将不变的部分隔离出来，也就是所有的动物都会叫

let makeSound = function (animal) {
  animal.sound()
}

然后把可变的部分封装起来：

let Duck = function () {}
Duck.prototype.sound = function () {
  console.log("ga")
}

let Chicken = function () {}
Chicken.prototype.sound = function () {
  console.log("ge")
}

makeSound(new Duck())  // ga
makeSound(new Chicken())  // ge

再比如我们要开发一个地图应用，现在有百度和谷歌两家地图提供了API，且均提供了show()方法，代码如下：

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

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

let renderMap = function (type) {
  if (type === "google") {
    googleMap.show()
  } else if (type === "baidu") {
    baiduMap.show()
  }
}

renderMap("google")  // 开始渲染谷歌地图
renderMap("baidu")  // 开始渲染百度地图

可以看到，虽然renderMap()函数保持了一定的弹性，但是这种弹性很脆弱，如果再换另一个地图，有需要修改renderMap函数，继续添加条件分支语句。
我们可以把程序相同的部分抽象出来，即显示某个地图：

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

结束语

希望能为你带来一些启发。

参考资料：
《JavaScript 设计模式与开发实战》 第一章

服务器托管云服务器 php的面向对象 java的面向对象 javascript 面向对象 javascript面向对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100426.html

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript

摘要：在中，并没有对抽象类和接口的支持。例如，当对象需要对象的能力时，可以有选择地把对象的构造器的原型指向对象，从而达到继承的效果。本节内容为设计模式与开发实践第一章笔记。动态类型语言编程语言按数据类型大体可以分为两类：静态类型语言与动态类型语言。静态类型语言在编译时已确定变量类型，动态类型语言的变量类型要到程序运行时，待变量被赋值后，才具有某种类型。而JavaScript是一门典型...

suxier 2019-08-21 10:44 评论0 收藏0
JavaScript面向对象的三大特征

摘要：什么是面向对象本文不在论述。接下来说一下面向对象的三大特征在当中的实现。封装实现封装实现就是是对象内部的变化对外界是透明的不可见。这种做法使对象之间低耦合便于维护升级团队协作开发。。概述本来打算写设计模式的，在谈论js的设计模式之前先说一下js的面向对象,因为很多设计模式的实现都掺杂着面向对象的思想,所以先做一下前期铺垫。 js我们都知道是一种动态类型脚本型语言,变量类型无法保证,...

chaosx110 2019-08-20 14:15 评论0 收藏0