阿里巴巴技术文章分享 Javascript继承机制的实现
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
如下图所示：
原型链的这个特性，和继承很相似，所以自然而然，我们可以利用它来实现继承机制。而原型链对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）。这样我们得到三级类结构：
实现这个设计的代码如下：
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
这篇文章不错吧，那就给个赞吧！
相关文章
现在网站换皮肤是比较常见的功能，大多数论坛都有的，要想实现这样效果可以看如下代码.2009-11-11
这篇文章主要介绍了JavaScript反射与依赖注入,结合实例形式较为详细的分析了JavaScript反射与依赖注入的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了JavaScript动态加载CSS和JS文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
console一定是各位前端最熟悉的小伙伴了,有些网站还会在控制台输出一些有意思的东西,下面这篇文章主要给大家介绍了关于前端console用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了JavaScript实现拖拽和缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
uniapp内置组件scroll-view案例详解(完整代码)
这篇文章主要介绍了uniapp内置组件scroll-view案例详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了深入理解redux之compose的具体应用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
js中的继承与其说是对象的继承,但更像是让函数的功能和用法的复用,下面这篇文章主要给大家介绍了关于js中常见的6种继承方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
一文详解为什么JavaScript中的JSON.parse()报错
这篇文章主要介绍了JavaScript中JSON.parse()方法的使用和常见错误,包括非法JSON格式、包含不可解析的字符、使用单引号等,并提供了相应的解决方案和实际项目中的代码示例,需要的朋友可以参考下2025-03-03
检查输入的是否是数字使用keyCode配合onkeypress事件
检查输入的是否是数字在本文使用keyCode配合onkeypress事件来实现，具体示例如下2014-01-01
最新评论