深入理解JavaScript是如何实现继承的


Posted in Javascript onDecember 12, 2013

最近最网上看了一个人面试淘宝时的经历,然后发现了自己有好多好多不太清楚的地方,所以特此写点文章来加深自己对一些问题的理解。

文章中提到了一个问题是:JavaScript是如何实现继承的?

下面我便阐述一些在网上找到的方法和实例来解释下,借以加深自己的印象。

我们知道JavaScript中的function是万能的,除了用于的函数定义,也可以用于类的定义。

JavaScript的继承,说起来也是有点怪,不像C++和一些面向对象的语言,他没有public,private等访问控制修饰,也没有implement或其他特定的符号来说明是实现继承。

关于javascript类的继承可以参考一下下面的这个例子。

<script type="text/javascript"> 
function Person() {
    // 属性 
    this.Gender = "female";
    this.Age = 18;
    this.Words = "Silence";
    // 方法
    this.shouting = function() {
        alert("开心哦!父类的方法");
    }
}
// 继承
function Programmer() {
    this.base = Person;
}
Programmer.prototype = new Person;
// 为子类添加新的方法
Programmer.prototype.typeCode = function() {
    alert("俺是敲代码的!IT民工,很不开心。子类的方法");
}
// 调用示例
function sayHello() {
    var a = new Programmer();
    alert(a.Gender); // 调用父类的属性
    a.shouting(); // 调用父类的方法
    a.typeCode(); // 调用子类的方法
}        
sayHello();
</script>

上例中,首先是声明一个person类,里面包含了一些属性和方法,然后接着又声明了一个programmer类,其中有个base属性,这个属性并不是必需的,但是出于规范以及以后在查找对象所继承的类时都需要写上,然后是给programmer的原型对象(prototype)拷贝了person类;于是便实现了类的继承。

模拟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通过构造函数和原型的方式模拟实现了类的功能。

下面通过一个例子来具体阐述创建一个自定义对象,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

在上面的这个例子中,如果他仅仅是通过拷贝得来的,则在删除了这个age这个属性后,这个对象里面将不会存在,但是例子中的age属性还能输出,还是覆盖以前的值,说明我们仅仅是删除了子类中同名的属性,而父类当中的age属性通过一种不可见的链接依然存在在对象中。

如何在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

好了,以上就是一些关于javascript实现继承的具体过程,和实现继承的方法。

当然总结一下,javascript中的继承机制仅仅是靠模拟的,于一些面向对象的语言来讲,显的粗糙而且还有一些缺陷,不过总的来讲,这依然不并会降低前端开发者在这方面的热情。

Javascript 相关文章推荐
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
纯js实现倒计时功能
Jan 06 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue中锚点的三种方法
Jul 06 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
VueX模块的具体使用(小白教程)
Jun 05 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 #Javascript
javascripit实现密码强度检测代码分享
Dec 12 #Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 #Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 #Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 #Javascript
js中typeof的用法汇总
Dec 12 #Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 #Javascript
You might like
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
JS delegate与live浅析
2013/12/21 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python生成器表达式和列表解析
2016/03/10 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
对Python中plt的画图函数详解
2018/11/07 Python
详解python数据结构和算法
2019/04/18 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Python pymsql模块的使用
2020/09/07 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
文明青少年标兵事迹材料
2014/01/28 职场文书
小学教师师德感言
2014/02/10 职场文书
图书馆义工感想
2015/08/07 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript