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 ...
随机推荐
- pytorch_08_RNN
1.循环神经网络的提出是基于记忆模型的想法,期望网络能够记住前面出现的特征,并依据特征推断后面的结果,而且整体的网络结构不断循环,因而得名循环神经网络. 2.循环神经网络的基本结构特别简单,就是将网络 ...
- Selenium+java - 单选框及复选框处理
一.什么是单选框.复选框? 二.被测页面html源代码 CheckBoxRadioDemo.html <!DOCTYPE html> <html lang="en" ...
- 自定义异常类；键盘输入；try catch用法
相关考点:自定义异常类:键盘输入:try catch用法 1.设计一个java程序,自定义一个异常类,从键盘输入一个字符串,如果等于“abc”,则抛出异常. public class MyExcept ...
- C# .NET 使用 NPOI 生成 .xlsx 格式 Excel
IWorkbook workbook = new XSSFWorkbook(); ISheet sheet = workbook.CreateSheet("-"); IRow ro ...
- MySQL学习——存储引擎
MySQL学习——存储引擎 摘要:本文主要学习了MySQL数据库的存储引擎. 什么是存储引擎 数据库存储引擎是数据库底层软件组件,数据库管理系统使用数据引擎进行创建.查询.更新和删除数据操作.不同的存 ...
- Java生鲜电商平台-微服务入门与服务的拆分架构实战
Java生鲜电商平台-微服务入门与服务的拆分架构实战 刚开始进入软件行业时还是单体应用的时代,前后端分离的概念都还没普及,开发的时候需要花大量的时间在“强大”的JSP上面,那时候SOA已经算是新技术了 ...
- Nginx+keepalived(高可用主备模式)
Nginx+keepalived(高可用主备模式) 环境:centos6.7 准备:两台服务器(虚拟机).两台应用(Tomcat).Nginx.keepalived server1:192.168.2 ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- webpack打包配置禁止html标签全部转为小写
用webpack打包页面,发现html中特别写的用来给后端识别的大写标签全部被转为了小写标签,这时候需要将加一个配置 ,caseSensitive:true ,禁止大小写转换. webpack配置: ...
- Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1)
Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1) APPLIES TO ...