继承行为在 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 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
Javascript的闭包详解
Dec 26 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python3读取zip文件信息的方法
2015/05/22 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
学习新党章思想汇报
2014/01/09 职场文书
公司司机岗位职责
2014/02/07 职场文书
高三高考决心书
2014/03/11 职场文书
财务部总监岗位职责
2014/03/12 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
汽车广告策划方案
2014/05/31 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
公务员政审材料
2014/12/23 职场文书
公司门卫岗位职责
2015/04/13 职场文书
停电调休通知
2015/04/16 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js