JavaScript 继承详解 第一篇


Posted in Javascript onAugust 30, 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函数
Oct 16 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
javaScript语法总结
Nov 25 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 #Javascript
用cssText批量修改样式
Aug 29 #Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 #Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
用户注册常用javascript代码
Aug 29 #Javascript
csdn 博客中实现运行代码功能实现
Aug 29 #Javascript
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
php数组去除空值函数分享
2015/02/02 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python3基础之输入和输出实例分析
2014/08/18 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
下载官网python并安装的步骤详解
2019/10/12 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
.NET程序员的几道面试题
2012/06/01 面试题
专业实习自我鉴定
2013/10/29 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
单位接收函范文
2015/01/30 职场文书