javascript中的3种继承实现方法


Posted in Javascript onJanuary 27, 2016

使用Object.create实现类式继承

下面是官网的一个例子

//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);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

此时Rectangle原型的constructor指向父类,如需要使用自身的构造,手动指定即可,如下

Rectangle.prototype.constructor = Rectangle;

使用utilities工具包自带的util.inherites

语法

util.inherits(constructor, superConstructor)
例子

const util = require('util');
const EventEmitter = require('events');

function MyStream() {
  EventEmitter.call(this);
}

util.inherits(MyStream, EventEmitter);

MyStream.prototype.write = function(data) {
  this.emit('data', data);
}

var stream = new MyStream();

console.log(stream instanceof EventEmitter); // true
console.log(MyStream.super_ === EventEmitter); // true

stream.on('data', (data) => {
 console.log(`Received data: "${data}"`);
})
stream.write('It works!'); // Received data: "It works!"

也很简单的例子,其实源码用了ES6的新特性,我们瞅一瞅

exports.inherits = function(ctor, superCtor) {

 if (ctor === undefined || ctor === null)
  throw new TypeError('The constructor to "inherits" must not be ' +
            'null or undefined');

 if (superCtor === undefined || superCtor === null)
  throw new TypeError('The super constructor to "inherits" must not ' +
            'be null or undefined');

 if (superCtor.prototype === undefined)
  throw new TypeError('The super constructor to "inherits" must ' +
            'have a prototype');

 ctor.super_ = superCtor;
 Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
};

其中Object.setPrototypeOf即为ES6新特性,将一个指定的对象的原型设置为另一个对象或者null

语法

Object.setPrototypeOf(obj, prototype)
obj为将要被设置原型的一个对象
prototype为obj新的原型(可以是一个对象或者null).

如果设置成null,即为如下示例

Object.setPrototypeOf({}, null);
感觉setPrototypeOf真是人如其名啊,专门搞prototype来玩。
那么这个玩意又是如何实现的呢?此时需要借助宗师__proto__

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
 obj.__proto__ = proto;
 return obj; 
}

即把proto赋给obj.__proto__就好了。

使用extends关键字

熟悉java的同学应该非常熟悉这个关键字,java中的继承都是靠它实现的。
ES6新加入的class关键字是语法糖,本质还是函数.

在下面的例子,定义了一个名为Polygon的类,然后定义了一个继承于Polygon的类 Square。注意到在构造器使用的 super(),supper()只能在构造器中使用,super函数一定要在this可以使用之前调用。

class Polygon {
 constructor(height, width) {
  this.name = 'Polygon';
  this.height = height;
  this.width = width;
 }
}

class Square extends Polygon {
 constructor(length) {
  super(length, length);
  this.name = 'Square';
 }
}

使用关键字后就不用婆婆妈妈各种设置原型了,关键字已经封装好了,很快捷方便。

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 #Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 #Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
又一个php 分页类实现代码
2009/12/03 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
关于开学的感想
2015/08/10 职场文书
推广普通话主题班会
2015/08/17 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL