继承行为在 ES5 与 ES6 中的区别详解


Posted in Javascript onDecember 24, 2019

笔者注:一句话引发的基础知识回炉,基础不扎实,还要什么自行车

最近在看 React 方面的一些文章时,看到了这样一个问题,「为什么每个 class 中都要写 super, super 是做什么的?」, 刚看到这个问题时,直接就想到了继承行为在 javascript 中的表现。后面作者的一句话「super 不可以省略,省略的话会报错」。当时脑海中蹦出来一个念头,这个同学是不是写错了,super 不就是用来完成调用父类构造函数,将父类的实例属性挂在到 this 上吗?为什么不写还会报错?

后来自己亲自写了一个 Demo 尝试了一下,还真是会报错,到底是哪里出了问题,找到了阮老师的教程又打开仔细看了一遍,发现里面还真是有这样一句话:

子类必须在 constructor 方法中调用 super 方法,否则新建实例时会报错。这是因为子类自己的 this 对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用 super 方法,子类就得不到 this 对象。

原来如此,ES6 中 this 对象的构造方式发生了变化。

ES5 中的继承

// Shape - 父类(superclass)
function Shape() {
 this.x = 0;
 this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
 this.x += x;
 this.y += y;
 console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
 Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
 rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
 rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

如上所示: 展示了一个 ES5 中实现单继承的例子,在《Javascript 高级程序设计》一书中,给这种继承方式定义为「寄生组合式继承」。不管什么形式,什么命名,在 ES5 中实现继承始终就是要坚持一个原则:将实例属性放在构造函数中挂在this上,将一些方法属性挂在原型对象上,子类可共享。 上面这种继承方式的关键在于两点:

  1. 子类构造函数通过 apply 或者 call 的方式运行父类的构造函数,此举将父类的实例属性挂在子类的 this 对象上
  2. 以父类的原型对象为基础,与子类的原型对象之间建立原型链关系,使用了 Object.create,本质在于 Child.prototype.__proto === Parent.prototype;

ES6 中的继承

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }

 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

class ColorPoint extends Point {
 constructor(x, y, color) {
  super(x, y); // 调用父类的constructor(x, y)
  this.color = color;
 }

 toString() {
  return this.color + ' ' + super.toString(); 
 }
}

ES6 中的继承使用到了 extends 关键字,function 也变成了 class 关键字。class 的本质还是一个语法糖,这个大家都会脱口而出,但是在继承机制这里到底是如何做到的,我们看一下 babel 在此处是如何帮我们转译的,

var ColorPoint =
/*#__PURE__*/
function (_Point) {
 _inherits(ColorPoint, _Point);

 function ColorPoint(x, y, color) {
  var _this;

  _classCallCheck(this, ColorPoint);

  _this = _possibleConstructorReturn(this, _getPrototypeOf(ColorPoint).call(this, x, y)); // 调用父类的constructor(x, y)

  _this.color = color;
  return _this;
 }

 _createClass(ColorPoint, [{
  key: "toString",
  value: function toString() {
   return this.color + ' ' + _get(_getPrototypeOf(ColorPoint.prototype), "toString", this).call(this);
  }
 }]);

 return ColorPoint;
}(Point);

如上是经过babel转译后的代码,有几个关键点:

一、 _inherits()

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

首先完成extends对象的校验,必须是function 或者null,否则报错。其次完成以下事情:

ColorPoint.__proto__ === Point;
ColorPoint.prototype.__proto__ === Point.prototype;

二、 ColorPoint 构造函数中 _classCallCheck(), _possibleConstructorReturn()

function _classCallCheck(instance, Constructor) {
 if (!_instanceof(instance, Constructor)) {
   throw new TypeError("Cannot call a class as a function");
 }
}

主要是用来检测构造函数不能直接调用,必须是通过new的方式来调用。

function _possibleConstructorReturn(self, call) {
 if (call && (_typeof(call) === "object" || typeof call === "function")) {
   return call;
 }
 return _assertThisInitialized(self);
}

调用父类的构造函数,初始化一些实例属性,并将this返回。使用该返回的this赋值给子类的this对象,子类通过这一步返回的this对象,再该基础之上在添加一些实例属性。

这就是最大的不同之处。如果不经历这一步,子类没有this对象,一旦操作一个不存在的this对象就会报错。

三、 _createClass()

function _createClass(Constructor, protoProps, staticProps) {
 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
 if (staticProps) _defineProperties(Constructor, staticProps);
 return Constructor;
}

最后一步完成原型属性与静态属性的挂载,如果是原型属性,挂在在Constructor上的prototype上,如果是静态属性或者静态方法,则挂在Constuctor 上。

总结

基础知识要打牢,不是为了面试,前期打不劳,后面很多事情就会变的模棱两可,别人问到的时候,就会是「可能」、「也许」。不积跬步何以至千里 ,加油。

参考链接

http://es6.ruanyifeng.com/#docs/class-extends

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code_lz=Q

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
在JavaScript中实现链式调用的实现
Dec 24 #Javascript
vue实现分页加载效果
Dec 24 #Javascript
微信小程序如何获取地址
Dec 24 #Javascript
浅析vue-router中params和query的区别
Dec 24 #Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 #Javascript
You might like
多重?l件?合查?(二)
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
青奥会口号
2014/06/12 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
实习科室评语
2015/01/04 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
python如何将mat文件转为png
2022/07/15 Python