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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
react ant Design手动设置表单的值操作
Oct 31 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 购物车的例子
2009/05/04 PHP
PHP学习笔记之二
2011/01/17 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JSONP基础知识详解
2017/03/19 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
ES6扩展运算符用法实例分析
2017/10/31 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
github配置使用指南
2014/11/18 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python生成特定分布数的实例
2019/12/05 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
员工培训协议书
2014/09/15 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
文员岗位职责
2015/02/04 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
起诉状范本
2015/05/20 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers