重学JS: 多态封装继承

2019-11-03 admin

前言

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

[转载]原文链接:https://segmentfault.com/a/1190000020893284

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78798.html

文章标题:重学JS: 多态封装继承

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部