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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
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 表单提交给自己
2008/07/24 PHP
PHP 简单日历实现代码
2009/10/28 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python Socket使用实例
2017/12/18 Python
名片管理系统python版
2018/01/11 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python如何随机生成高强度密码
2020/08/19 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
银行求职推荐信范文
2013/11/30 职场文书
个人承诺书
2014/03/26 职场文书
2015年班组长工作总结
2015/04/10 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
MSSQL基本语法操作
2022/04/11 SQL Server