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 相关文章推荐
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python如何测试stdout输出
2020/08/10 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python 读取串口数据的示例
2020/11/09 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
节约用水演讲稿
2014/05/21 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
欠款证明
2015/06/24 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis