热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ES6入门教程之Class和Module详解

这篇文章主要给大家介绍了ES6中Class和Module的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

本文主要介绍了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) );

总结

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


推荐阅读
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • 我有使用googledrivepdf的共享链接,我必须使用angular7下载pdf文件。我已经完成了自欺 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 学习SLAM的女生,很酷
    本文介绍了学习SLAM的女生的故事,她们选择SLAM作为研究方向,面临各种学习挑战,但坚持不懈,最终获得成功。文章鼓励未来想走科研道路的女生勇敢追求自己的梦想,同时提到了一位正在英国攻读硕士学位的女生与SLAM结缘的经历。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文介绍了brain的意思、读音、翻译、用法、发音、词组、同反义词等内容,以及脑新东方在线英语词典的相关信息。还包括了brain的词汇搭配、形容词和名词的用法,以及与brain相关的短语和词组。此外,还介绍了与brain相关的医学术语和智囊团等相关内容。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 本文介绍了计算机网络的定义和通信流程,包括客户端编译文件、二进制转换、三层路由设备等。同时,还介绍了计算机网络中常用的关键词,如MAC地址和IP地址。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
author-avatar
少伶围脖
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有