ES6入门教程之Class和Module详解


Posted in Javascript onMay 17, 2017

本文主要介绍了ES6中Class和Module的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、Class

ES6引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

// 定义类
 class Point() {

  constructor(x, y) {
   this.x = x;
   this.y = y;
  }

  toString() {
   return '(' + this.x + ', ' + this.y + ')';
  }
 }

 var point = new Point(2, 3);
 point.toString(); //(2, 3)

在上面的代码片段里,先是定义了一个Point类,里面还有一个constructor函数,这就是构造函数。而this关键字则代表实例对象。

Class之间可以通过extends关键字实现继承

Class ColorPoint extends Point {
 constructor(x, y, color) {
  super(x, y); //等同于super.constructor(x, y)
  this.color = color;
 }

 toString() {
  return this.color + '' + super();
 }
}

二、Module的基本用法

1>、export和import

ES6实现了模块功能,视图解决JavaScript代码的依赖和部署上的问题,取代现有的commonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

模块的功能有两个关键字: export和import。export用于用户自定义模块。规定对外接口;import用于输入其他模块的功能,同时创建命名空间(namespace),防止函数名冲突。

ES6允许将独立的JS文件作为模块,也就是说,允许一个JavaScript脚本文件调用另一个脚本文件。最简单的模块就是一个JS文件,里面使用export关键字输出变量。

//profile.js
 export var firstName = "Pandora";
 export var lastName = "G.Dragon";
 export var year = 1973;

 //export还有下面这种写法,两者是等价的
 var firstName = "Pandora";
 var lastName = "G.Dragon";
 var year = 1973;
 export({firstName, lastName, year});

使用export定义模块之后,其他JS文件就可以通过import关键字加载这个模块(文件)了。加载方式如下:

import {firstName, lastName, year} from './profile';

 function setHeader(element) {
  element.textContent = firstName + '' + lastName;
 }

上面的代码片段中,使用了import关键字接受一个对象——用“{ }”表示。里面指定了要从其他模块中导入的变量。大括号里面的变量名必须与被导入模块对外接口的名称相同。

但是,如果要给输入的属性和方法重新取一个名字,import语句要写成下面这样。

import {someMethod, another as newName} from './exporter';

2>、模块的整体加载

export关键字除了输出变量,还可以输出方法或类(class)。看看下面代码:

// circle.js

 // 方法-1: 返回圆的面积
 export function area(radius) {
  return Math.PI * radius * radius; 
 }
 // 方法-2: 返回圆的周长
 export function circumference(radius) {
  return 2 * Mathi.PI * radius;
 }

下面,定义一个main.js文件引用上面的模块。

// mian.js
 import {area, circumference} from 'circle';

 console.log("圆面积: " + area(4));
 console.log("圆周长: " + circumference(14));

上面的写法是逐一制定要导入的方法。但是还有另外一种写法,就是使用module关键字,整体导入。

// main.js
 module circle from 'circle';

 console.log("圆面积: " + circle.area(4));
 console.log("圆周长: " + circle.circumference(14));

module关键字后面跟着一个变量,表示导入的模块定义在该变量上。

3>、export default语句

如果不想为某个属性或方法制定输入的名称,可以使用export default语句。

// export-default.js
 export default function foo() { // foo()就是这个模块的默认方法
  console.log('foo');
 }

当在其它模块中导入该模块时,import语句可以为默认方法指定任意名字。

// import-default.js
 import customName from './export-default';
 customName(); //'foo'

显然,一个模块只能由一个默认方法。
对于默认属性,则是直接定义在export default后面即可。如下代码所示:

export default 42;

三、模块的继承

模块之间是可以继承的。

现在,假设一个circlePlus模块继承了circle模块。代码如下:

//circleplus.js
 export * from 'circle'; // "export *"表示输出circle模块的所有属性和方法
 export var e = 2.71828;
 export default function(x) {
  return Math.exp( x );
 }

这时,可以对cicle中的属性和方法改名后再输出。

export {area as circleArea } from 'circle';

加载模块的写法如下:

//main.js
 module math from 'circleplus';
 import exp from "circleplus"; // "import exp"表示将circleplus模块的默认方法加载为exp方法。
 console.log( exp(math.pi) );

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
JavaScript 定时器详情
Nov 11 Javascript
AngularJS实现动态添加Option的方法
May 17 #Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 #Javascript
Vue声明式渲染详解
May 17 #Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 #Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 #Javascript
AngularJS实现的回到顶部指令功能实例
May 17 #Javascript
bootstrap模态框示例代码分享
May 17 #Javascript
You might like
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python3进制之间的转换代码实例
2019/08/24 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
简历的自我评价范文
2014/02/04 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android