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获取提交的字符串的字节数
Feb 09 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
vue实现搜索过滤效果
May 28 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php利用header函数下载各种文件
2016/08/24 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python内存管理机制原理详解
2019/08/12 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python MD5加密的示例
2020/10/19 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
会计实习期自我鉴定
2013/10/06 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
物理教育专业求职信
2014/06/25 职场文书
应届生求职信范文
2014/06/30 职场文书
会计试用期自我评价
2014/09/19 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS