深入理解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窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
在vue项目中使用sass语法问题
Jul 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
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python实现归并排序算法
2018/11/22 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
评析教师个人的自我评价
2014/02/19 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
法制报告会主持词
2014/04/02 职场文书
秋天的图画教学反思
2014/05/01 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Python字典的基础操作
2021/11/01 Python