JavaScript 继承详解(一)


Posted in Javascript onJuly 13, 2009

面向对象与基于对象

几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例。 类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。

但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数,比如下面这个例子:

// 定义一个函数 - add
    function add(a, b) {
      add.invokeTimes++;
      return a + b;
    }
    // 因为函数本身也是对象,这里为函数add定义一个属性,用来记录此函数被调用的次数
    add.invokeTimes = 0;    add(1 + 1);
    add(2 + 3);
    console.log(add.invokeTimes);  // 2

 

模拟JavaScript中类和继承

在面向对象的语言中,我们使用类来创建一个自定义对象。然而JavaScript中所有事物都是对象,那么用什么办法来创建自定义对象呢?

这就需要引入另外一个概念 - 原型(prototype),我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉好像是拷贝)。

让我们看一下通过prototype创建自定义对象的一个例子:

// 构造函数
    function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    // 定义Person的原型,原型中的属性可以被自定义对象引用
    Person.prototype = {
      getName: function() {
        return this.name;
      },
      getSex: function() {
        return this.sex;
      }
    }

这里我们把函数Person称为构造函数,也就是创建自定义对象的函数。可以看出,JavaScript通过构造函数和原型的方式模拟实现了类的功能。
创建自定义对象(实例化类)的代码:

var zhang = new Person("ZhangSan", "man");
    console.log(zhang.getName());  // "ZhangSan"    var chun = new Person("ChunHua", "woman");
    console.log(chun.getName());  // "ChunHua"

当代码var zhang = new Person("ZhangSan", "man")执行时,其实内部做了如下几件事情:

  • 创建一个空白对象(new Object())。
  • 拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。
  • 将这个对象通过this关键字传递到构造函数中并执行构造函数。
  • 将这个对象赋值给变量zhang。

 

为了证明prototype模版并不是被拷贝到实例化的对象中,而是一种链接的方式,请看如下代码:

function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    Person.prototype.age = 20;    var zhang = new Person("ZhangSan", "man");
    console.log(zhang.age);  // 20
    // 覆盖prototype中的age属性
    zhang.age = 19;
    console.log(zhang.age);  // 19
    delete zhang.age;
    // 在删除实例属性age后,此属性值又从prototype中获取
    console.log(zhang.age);  // 20

这种在JavaScript内部实现的隐藏的prototype链接,是JavaScript赖以生存的温润土壤, 也是模拟实现继承的基础。

 

如何在JavaScript中实现简单的继承?
下面的例子将创建一个雇员类Employee,它从Person继承了原型prototype中的所有属性。

function Employee(name, sex, employeeID) {
      this.name = name;
      this.sex = sex;
      this.employeeID = employeeID;
    }
    // 将Employee的原型指向Person的一个实例
    // 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
    Employee.prototype = new Person();
    Employee.prototype.getEmployeeID = function() {
      return this.employeeID;
    };    var zhang = new Employee("ZhangSan", "man", "1234");
    console.log(zhang.getName());  // "ZhangSan

 

上面关于继承的实现很粗糙,并且存在很多问题:

  • 在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。
  • Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。
  • Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。
  • 创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。
  • 实现中有constructor属性的指向错误,这个会在第二篇文章中讨论。

我们会在第三章完善这个例子。

 

JavaScript继承的实现

正因为JavaScript本身没有完整的类和继承的实现,并且我们也看到通过手工实现的方式存在很多问题, 因此对于这个富有挑战性的任务网上已经有很多实现了:

  • Douglas Crockford - Prototypal Inheritance in JavaScript
  • Douglas Crockford - Classical Inheritance in JavaScript
  • John Resig - Simple JavaScript Inheritance
  • Dean Edwards - A Base Class for JavaScript Inheritance
  • Prototype
  • Mootools
  • Extjs

这个系列的文章将会逐一深入分析这些实现,最终达到对JavaScript中如何实现类和继承有一个深入的了解。

下一章我们将会介绍在类实现中的相关知识,比如this、constructor、prototype等。

Javascript 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
js模拟类继承小例子
Jul 17 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
javascript dom 操作详解 js加强
Jul 13 #Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 #Javascript
JavaScript 事件查询综合
Jul 13 #Javascript
JavaScript 事件对象的实现
Jul 13 #Javascript
Prototype Date对象 学习
Jul 12 #Javascript
Prototype Function对象 学习
Jul 12 #Javascript
Prototype Object对象 学习
Jul 12 #Javascript
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
vuex存储token示例
2019/11/11 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现串口自动触发工作的示例
2019/07/02 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
京剧自荐信
2014/01/26 职场文书
触电现场处置方案
2014/05/14 职场文书
文明城市创建标语
2014/06/16 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Python  lambda匿名函数和三元运算符
2022/04/19 Python