JavaScript之class继承_动力节点Java学院整理


Posted in Javascript onJuly 03, 2017

JavaScript的对象模型是基于原型实现的,特点是简单,缺点是理解起来比传统的类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链。

有没有更简单的写法?有!

新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

我们先回顾用函数实现Student的方法:

function Student(name) {
  this.name = name;
}

Student.prototype.hello = function () {
  alert('Hello, ' + this.name + '!');
}

如果用新的class关键字来编写Student,可以这样写:

class Student {
  constructor(name) {
    this.name = name;
  }

  hello() {
    alert('Hello, ' + this.name + '!');
  }
}

比较一下就可以发现,class的定义包含了构造函数constructor和定义在原型对象上的函数hello()(注意没有function关键字),这样就避免了Student.prototype.hello = function () {...}这样分散的代码。

最后,创建一个Student对象代码和前面章节完全一样:

var xiaoming = new Student('小明');
xiaoming.hello();

class继承

用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在,原型继承的中间对象,原型对象的构造函数等等都不需要考虑了,直接通过extends来实现:

class PrimaryStudent extends Student {
  constructor(name, grade) {
    super(name); // 记得用super调用父类的构造方法!
    this.grade = grade;
  }

  myGrade() {
    alert('I am at grade ' + this.grade);
  }
}

注意PrimaryStudent的定义也是class关键字实现的,而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同,例如,PrimaryStudent需要namegrade两个参数,并且需要通过super(name)来调用父类的构造函数,否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Studenthello方法,我们又在子类中定义了新的myGrade方法。

ES6引入的class和原有的JavaScript原型继承有什么区别呢?实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之,用class的好处就是极大地简化了原型链代码。

你一定会问,class这么好用,能不能现在就用上?

现在用还早了点,因为不是所有的主流浏览器都支持ES6的class。如果一定要现在就用上,就需要一个工具把class代码转换为传统的prototype代码,可以试试Babel这个工具。

练习

请利用class重新定义Cat,并让它从已有的Animal继承,然后新增一个方法say(),返回字符串 'Hello, xxx!'

Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
React组件生命周期详解
Jul 03 #Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 #Javascript
You might like
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
js微信分享API
2020/10/11 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
js实现下一页页码效果
2017/03/07 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python生成随机数组的方法小结
2017/04/15 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python安装whl文件过程图解
2020/02/18 Python
python实现简单遗传算法
2020/09/18 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
应届中专生自荐书范文
2014/02/13 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
上课说话检讨书
2015/01/27 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书