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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 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 Cookie的一个使用注意点
2008/11/08 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python创建临时文件和文件夹
2020/08/05 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
python解包概念及实例
2021/02/17 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
社区国庆节活动方案
2014/02/05 职场文书
网络研修随笔感言
2014/02/17 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2016年国陪研修感言
2015/11/18 职场文书
nginx内存池源码解析
2021/11/20 Servers