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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
微信小程序如何实现在线客服功能
Oct 16 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伪静态写法附代码
2008/06/20 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
js常用函数 不错
2006/09/08 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
35个Python编程小技巧
2014/04/01 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
详解Anaconda 的安装教程
2020/09/23 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
报社实习生自荐信
2014/01/24 职场文书
护士感人事迹
2014/05/01 职场文书
村党支部换届选举方案
2014/05/02 职场文书
运动会演讲稿
2014/05/07 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
党员批评与自我批评材料
2014/10/14 职场文书