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 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
Javascript的无new构建实例详解
May 15 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jquery maxlength使用说明
2011/09/09 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
Vue基础配置讲解
2019/11/29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
走进敬老院活动总结
2014/07/10 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
销售经理岗位职责
2015/01/31 职场文书
清洁员岗位职责
2015/02/15 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
学生检讨书怎么写
2015/05/07 职场文书
公司保洁员管理制度
2015/08/04 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python