ES6中Class与export简单用法
一、Class
ES6中的Class用法类似Java的Class用法,但class的本质是js一个function
//定义类
class Person {
//定义构造方法
constructor(name, age){
console.log("父类构造方法")
this.name = name;
this.age = age;
} getInfo(){
return `姓名:${this.name} , 年龄: ${this.age}`;
}
} let person = new Person("Jack", 10);
console.log(person);
console.log(person.getInfo()); //通过extends 实现继承
class BlackPerson extends Person{
constructor(name, age, height){
super(name, age);
console.log("子类构造方法");
this.height = height;
} //重写父类方法
getInfo(){
return `姓名:${this.name} , 年龄: ${this.age} , 身高: ${this.height}`;
}
} let xiaohei = new BlackPerson("xiaohei", 24, 160);
console.log(xiaohei);
console.log(xiaohei.getInfo());
二、模块化export
在创建JavaScript模块时,export
语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import
语句使用它们。
export.js
let name = 'Jack';
let age = 11;
let func = function () {
return `姓名: ${name} ,年龄:${age}`;
};
let myclass = class myClass{
static a = "呵呵";
} //export {name, age, func, myclass}; export default {
name: name,
age: age,
getInfo(){
return `姓名:${this.name} , 年龄: ${this.age}`;
}
}
es6模块.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
1
<script type="module">
//import {name, age, func, myclass};
import student from "./js/export.js";
console.log(student);
console.log(student.getInfo());
</script>
</body>
</html>
结果:
Reference:
ES6中Class与export简单用法的更多相关文章
- java项目中ehcache缓存最简单用法
java项目中ehcache缓存最简单用法: 1.下载ehcache-core-2.4.3.jar复制到项目的lib目录下 2.新建ehcache.xml文件,放置在项目src目录下的resour ...
- ES5和ES6中关于import & export的书写方式的区别
ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...
- es6中let,const区别与其用法
ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...
- AngularJS中$http服务的简单用法
我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...
- es6中的import,export浏览器已经支持
直接上代码, 成功测验了es6的新特性 import , export语法. 服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段. ind ...
- WPF中StringToImage和BoolToImage简单用法
在WPF的绑定控件操作中,经常会通过bool值或者某些特定的string值做出相应动作.但UI层控件的很多属性对应的都不是Bool值或者对应的只是固定的String值. 这个时候有两方法解决该问题. ...
- Vue中jsx的最简单用法
最终页面显示效果为 <div class="open-service" style="color: #0199f0; cursor: pointer;"& ...
- SQL Server中row_number函数的简单用法
一.SQL Server Row_number函数简介 ROW_NUMBER()是一个Window函数,它为结果集的分区中的每一行分配一个连续的整数. 行号以每个分区中第一行的行号开头. 以下是R ...
- sqlplus 中spool命令的简单用法
spool基本格式: spool 路径+文件名 select col1||','||col2||','||col3||','||col4||'..' from tablename; spool off ...
随机推荐
- js SetTimeout传参问题
今天写代码遇到这样一个问题,先上代码 <!--JS方法--> function textout(obj){ if(opac==60){opac=0;return;}; opac+=10; ...
- 转载-通过ApplicationContext 去获取所有的Bean
Spring Boot - 获取所有的Bean信息 阅读目录 前言 通过ApplicationContext 去获取所有的Bean 前言 Spring Boot启动的时候需要加载许多Bean实现最小化 ...
- C#截图操作(几种截图方法)
公共函数获取屏幕截图private Bitmap GetScreenCapture(){ Rectangle tScreenRect = new Rectangle(0, 0, Screen.Prim ...
- NumPy 学习 第二篇:索引和切片
数组索引是指使用中括号 [] 来定位数据元素,不仅可以定位到单个元素,也可以定位到多个元素.索引基于0,并接受从数组末尾开始索引的负索引. 举个例子,正向索引从0开始,从数组开始向末尾依次加1递增:负 ...
- .net core入门-跨域访问配置
Asp.net Core 跨域配置 一般情况WebApi都是跨域请求,没有设置跨域一般会报以下错误 No 'Access-Control-Allow-Origin' header is prese ...
- Protobuffer学习文档
官方EN:https://developers.google.com/protocol-buffers/docs/pythontutorial 中文:https://cloud.tencent.com ...
- 用 Python 带你看各国 GDP 变迁
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 周萝卜 源自:萝卜大杂烩 PS:如有需要Python学习资料的小伙伴 ...
- 5-网宿CDN客户端推流NGB
网宿NGB调度系统(类似httpdns原理)从服务端分发给客户端推流IP,实现基于APP realip精准调度模式. 参考官网介绍:https://www.wangsu.com/content/det ...
- 高强度学习训练第八天总结:MySQL的一些优化
为什么要做MYSQL优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库中的数据会越来越多,处理时间会相应变慢. 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计 ...
- kafka集群在消息消费出现无法找到topic分区的处理解决
最近几天在做spark数据同步过程中,中间通过kafka集群处理消息,每次同步到一半就会出现同步不了 查看日志如下: 最开始看到这个问题很懵逼,完全找不到解决问题的切入口,期间也询问了架构师-因为这个 ...