重学JS: 多态封装继承

前言

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面向对象编程思想有所帮助 若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞