重学JS-多态封装继承

jiezi

5 年前

JS 是一种基于对象的语言，在 JS 中几乎所有的东西都可以看成是一个对象，但是 JS 中的对象模型和大多数面向对象语言的对象模型不太一样，因此理解 JS 中面向对象思想十分重要，接下来本篇文章将从多态、封装、继承三个基本特征来理解 JS 的面向对象思想

同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果，也就是说，给不同的对象发送同一个消息时，这些对象会根据这个消息分别给出不同的反馈。
举个例子：假设家里养了一只猫和一只狗，两只宠物都要吃饭，但是吃的东西不太一样，根据主人的吃饭命令，猫要吃鱼，狗要吃肉，这就包含了多态的思想在里面，用 JS 代码来看就是：

let petEat = function (pet) {pet.eat()
} 
let Dog = function () {}
Dog.prototype.eat = function () {console.log('吃肉')
}
let Cat = function () {}
Cat.prototype.eat = function () {console.log('吃鱼')
}

petEat(new Dog())
petEat(new Cat())

上面这段代码展示的就是对象的多态性，由于 JS 是一门动态类型语言，变量类型在运行时是可变的，因此一个 JS 对象既可以是 Dog 类型的对象也可以是 Cat 类型的对象，JS 对象多态性是与生俱来的，而在静态类型语言中，编译时会进行类型匹配检查，如果想要一个对象既表示 Dog 类型又表示 Cat 类型在编译的时候就会报错，当然也会有解决办法，一般会通过继承来实现向上转型，这里感兴趣的可以去对比一下静态语言的对象多态性。

多态的作用是通过把过程化的条件分支语句转化为对象的多态性，从而消除这些条件分支语句，举个例子：还是上面宠物吃饭的问题，如果在没有使用对象的多态性之前代码可能是这样是的：

let petEat = function (pet) {if (pet instanceof Dog) {console.log('吃肉')
  } else if (pet instanceof Cat) {console.log('吃鱼')
  }
}
let Dog = function () {}
let Cat = function () {}
petEat(new Dog())
petEat(new Cat())

通过条件语句来判断宠物的类型决定吃什么，当家里再养金鱼，就需要再加一个条件分支，随着新增的宠物越来越多，条件语句的分支就会越来越多，按照上面多态的写法，就只需要新增对象和方法就行，解决了条件分支语句的问题

封装的目的是将信息隐藏，一般来说封装包括封装数据、封装实现，接下来就逐一来看：

由于 JS 的变量定义没有 private、protected、public 等关键字来提供权限访问，因此只能依赖作用域来实现封装特性，来看例子

var package = (function () {
  var inner = 'test'
  return {getInner: function () {return inner}
  }
})()
console.log(package.getInner()) // test
console.log(package.inner) // undefined

封装实现即隐藏实现细节、设计细节，封装使得对象内部的变化对其他对象而言是不可见的，对象对它自己的行为负责，其他对象或者用户都不关心它的内部实现，封装使得对象之间的耦合变松散，对象之间只通过暴露的 API 接口来通信。
封装实现最常见的就是 jQuery、Zepto、Lodash 这类 JS 封装库中，用户在使用的时候并不关心其内部实现，只要它们提供了正确的功能即可

继承指的是可以让某个类型的对象获得另一个类型的对象的属性和方法，JS 中实现继承的方式有多种，接下来就看看 JS 实现继承的方式

这种实现继承的方式很简单，就是使用 call 或者 apply 方法将父对象的构造函数绑定在子对象上，举个例子：

function Pet (name) {
  this.type = '宠物'
  this.getName = function () {console.log(name)
  }
}
function Cat (name) {Pet.call(this, name)
  this.name = name
}
let cat = new Cat('毛球')
console.log(cat.type) // 宠物
cat.getName() // 毛球

通过调用父构造函数的 call 方法实现了继承，但是这种实现有一个问题，父类的方法是定义在构造函数内部的，对子类是不可见的

原型继承的本质就是找到一个对象作为原型并克隆它。这句话怎么理解，举个例子：

function Pet (name) {this.name = name}
Pet.prototype.getName = function () {return this.name}
let p = new Pet('毛球')
console.log(p.name) // 毛球
console.log(p.getName()) // 毛球
console.log(Object.getPrototypeOf(p) === Pet.prototype) // true

上面这段代码中 p 对象实际上就是通过 Pet.prototype 的克隆和一些额外操作得来的，有了上面的代码基础，接下来来看一个简单的原型继承代码：

let pet = {name: '毛球'}
let Cat = function () {}
Cat.prototype = pet
let c = new Cat()
console.log(c.name) // 毛球

来分析一下这段引擎做了哪几件事：

首先遍历 c 中的所有属性，但是没有找到 name 属性
查找 name 属性的请求被委托给对象 c 的构造器原型即 Cat.prototype，Cat.prototype 是指向 pet 的
在 pet 对象中找到 name 属性，并返回它的值

上面的代码实现原型继承看起来有点绕，实际上在 es5 提供了 Obejct.create()方法来实现原型继承，举个例子：

function Pet (name) {this.name = name}
Pet.prototype.getName = function () {return this.name}
let c = Object.create(new Pet('毛球'))
console.log(c.name) // 毛球
console.log(c.getName()) // 毛球

组合继承即使用原型链实现对原型属性和方法的继承，通过构造函数实现对实例属性的继承，举个例子：

function Pet (name) {this.name = name}
Pet.prototype.getName = function () {return this.name}
function Cat (name) {Pet.call(this, name)
}
Cat.prototype = new Pet()
let c = new Cat('毛球')
console.log(c.name) // 毛球
console.log(c.getName()) // 毛球

本篇文章主要介绍了 JS 面向对象编程思想的多态封装继承的特性，这里只做了浅析，想要深挖还需要更深入的学习，希望看完本篇文章对理解 JS 面向对象编程思想有所帮助
如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞

重学JS-多态封装继承

前言

多态

含义

作用

封装

封装数据

封装实现

继承

构造函数绑定

原型继承

组合继承

总结