深入理解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 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
js实现简单贪吃蛇游戏
May 15 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue精简版风格概述
2018/01/30 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
记录Django开发心得
2014/07/16 Python
Python探索之创建二叉树
2017/10/25 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python实现按首字母分类查找功能
2019/10/31 Python
wxPython实现画图板
2020/08/27 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
深入了解Python enumerate和zip
2020/07/16 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
如何撰写一封出色的求职信
2014/04/27 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Python数据结构之队列详解
2022/03/21 Python