深入理解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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
js option删除代码集合
Nov 12 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python可以用来做什么
2020/11/23 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
学校岗位设置方案
2014/01/16 职场文书
教师考核评语
2014/04/28 职场文书
应届生求职信
2014/05/31 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书