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
时间: 2024-09-13 02:07:46

Javascript继承机制的实现的相关文章

Javascript教程:重温Javascript继承机制

文章简介:重温Javascript继承机制. 上段时间,团队内部有过好几次几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了写口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java 和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器--Navigator0.9版诞生在网景公司(Netscape),极为

javascript继承机制

  澄清在先,Java 和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器--Navigator0.9版诞生在网景公司(Netscape),极为轰动. 但是,Navigator0.9只能用来浏览,不具备与访问者交互的能力,比如,用户提交一个数据表单,如果表单为空,浏览器是无法判断的,只能直接提交给服务器端,再把空值的错误返

javascript继承机制实例详解_javascript技巧

本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

Javascript继承机制的设计思想分享_javascript技巧

我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样

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

Javascript作为一门脚本语言,在设计之初并没有考虑到面向对象的特性.即便到了当今这个遍布现代浏览器的年代,各种Javascript 框架/库如雨后春笋般地疯狂生长,Javascript中连个 class 关键字都没有.如果你要编写一个类,你还得借助于function,至于继承.重载什么的,就别奢望了. 可是,没有继承,日子怎么过啊?难道把所有的共有逻辑都拷贝一遍,实现最低级的代码复用? 答案当然是--NO,所以,我们要自己实现继承! 目标 最关键的目标当然是继承--子类自动拥有父类的所有

Javascript继承机制的设计思想

我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样

Javascript 继承机制的实现_javascript技巧

选定基类后,就可以创建它的子类了.是否使用基类完全由你决定.有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数.在这种情况下,基类被看作抽象类. 尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类.通常,我们称这种类为抽象类. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现.记住,所有属性和方法都是公用的,因此子类可直接访问这些方法.子类还可添加超类中没有的新属性和方法,也可以覆盖超类中的属性和方法. 4.2.

JavaScript 继承机制的实现(待续)_js面向对象

1.对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式). 因为构造函数只是一个函数,所以可使ClassA的构造函数成为ClassB的方法,然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法. 例如: 下面方式定义的ClassA和ClassB: 复制代码 代码如下: function ClassA(sColor){ this.color=sColor; this.sayColor=function(){ alert(this.colo

javascript继承机制的实现示例详解

我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 如何创建一个类 假设有给叫Person的类如下:  代码如下 复制代码 var Person = function(name, age) {     this.name = name;     this.age = age; } Person.prototype.getName = function() {     return this.name; } 如上:Person代表地球上所有的人,每个人都有这两个基