阿里巴巴技术文章分享 Javascript继承机制的实现


Posted in Javascript onJanuary 14, 2016

Javascript作为一门脚本语言,在设计之初并没有考虑到面向对象的特性。即便到了当今这个遍布现代浏览器的年代,各种Javascript 框架/库如雨后春笋般地疯狂生长,Javascript中连个 class 关键字都没有。如果你要编写一个类,你还得借助于function,至于继承、重载什么的,就别奢望了。

可是,没有继承,日子怎么过啊?难道把所有的共有逻辑都拷贝一遍,实现最低级的代码复用?

答案当然是——NO,所以,我们要自己实现继承!

目标

最关键的目标当然是继承——子类自动拥有父类的所有公共属性和方法。

支持instanceof,例如c是子类的实例,而P是父类,c instanceof P应该返回true。

其次应该能够重写(Override)父类的方法,并且在子类的方法中,能够方便地调用到父类的同名方法。

至于说重载(Overload),由于Javascript的语言特性(不可以有同名方法,即便它们参数列表不一样),无法实现。

设计与实现

Javascript的对象有一个很重要的属性——__proto__,也就是原型。原型实质上也是一个对象,所有它也可以有自己的原型,这样就形成一个原型链。当你调用某个对象的某个方法,或者读取该对象的某个属性,Javascript执行器是这样做的:

1、首先到该对象中找对应的方法或属性,如果找不到,
2、到该对象的原型中找,如果还找不到,
3、到原型的原型里面找
4、...
5、直到最后找到Object的原型为止,如果还没有则返回undefined
如下图所示:

阿里巴巴技术文章分享 Javascript继承机制的实现

原型链的这个特性,和继承很相似,所以自然而然,我们可以利用它来实现继承机制。而原型链对instanceof的支持,使得它成为很好的选择。

我们定义extend函数,这个函数接受两个参数,第一个是父类,第二个是子类,如下所示:

function extend(ParentClass, ChildClass) {
  ...
  return ChildClass;
}

这个函数对子类进行处理,并返回子类。处理的逻辑如下:

建立原型链

通过将子类的原型链与父类的原型链连接起来,子类可以自动拥有父类的方法和属性:

var pp = ParentClass.prototype,
  cp = ChildClass.prototype;
function T() {};
T.prototype = pp;
ChildClass.prototype = new T();

为了连接原型链,需要创建一个父类的实例,并将其赋给子类的原型属性。但我们不希望在extend方法里面就实例化父类,所以引入了一个中间类T,以解决这个问题。

实现重写

原型链建立之后,原来子类原型上的方法和属性我们也需要保留下来:

方法

如果父类有同名方法,我们使用一个闭包,来保留对父类方法和子类方法的引用。然后,修改新的原型中该方法的引用,将其指向一个新的 function。在这个function里面,我们创建一个临时属性super,将其指向父类方法,并调用子类方法,这样在子类方法中,通过 this.super可以调用该父类方法:

ChildClass.prototype[name] = (function(pm, cm) {
  return function() {
    var _super = this.super;
    this.super = pm;
    var result = cm.apply(this, arguments);
    this.super = _super;
    return result;
  };
})(pp[name], cp[name]);

属性

对于属性,不存在重写的问题,所以直接将子类原来的原型中的属性加到新的原型中即可:

ChildClass.prototype[name] = cp[name];

构造器

为了让子类能够访问到父类的构造器,我们将父类赋给子类的super属性:

ChildClass.super = ParentClass;

如何使用

假设我们要设计一个管理系统,里面涉及到客户、工人和经理等。将客户和员工的共性抽象出来,我们得到人(People);然后将工人和经理的共性抽象得到员工(Employee)。这样我们得到三级类结构:

阿里巴巴技术文章分享 Javascript继承机制的实现

实现这个设计的代码如下:

function People(firstname, lastname) {
  this.firstname = firstname;
  this.lastname = lastname;
}

function Employee(firstname, lastname, company) {
  Employee.super.apply(this, arguments);
  this.company = company;
}

function Manager(firstname, lastname, company, title) {
  Manager.super.apply(this, arguments);
  this.title = title;
}

我们希望对每个人都有一个描述,People是姓+名;员工在姓+名之后,还包括公司名称;而经理在员工的描述之后,还包括职位。代码如下:

People.prototype.summary = function() {
  return this.firstname + " " + this.lastname;
};

Employee.prototype.summary = function() {
  return this.super.call(this) + ", " + this.company;
};

Manager.prototype.summary = function() {
  return this.super.call(this) + ", " + this.title;
};

在所有的成员方法都已经定义好之后,声明类的继承(必须先定义方法,再声明类的继承,否则无法在方法中使用this.super调用父类方法!):

extend(People, Employee);
extend(Employee, Manager);

使用这些类就比较简单,直接new就好了:

var people = new People("Alice", "Dickens");
var employee = new Employee("Bob", "Ray", "Alibaba");
var manager = new Manager("Calvin", "Klein", "Alibaba", "Senior Manager");
console.log( people.summary() ); //Alice Dickens
console.log( employee.summary() ); //Bob Ray, Alibaba
console.log( manager.summary() ); //Calvin Klein, Alibaba, Senior Manager

这篇文章不错吧,那就给个赞吧!

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
js实现随机点名程序
Sep 17 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
AngularJS初始化静态模板详解
Jan 14 #Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
基于javascript实现随机颜色变化效果
Jan 14 #Javascript
JavaScript事件类型中UI事件详解
Jan 14 #Javascript
JavaScript事件 "事件对象"的注意要点
Jan 14 #Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
You might like
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
Python实现随机爬山算法
2021/01/29 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
初中学生操行评语
2014/12/26 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
教师节祝酒词
2015/08/11 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python