一、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：

http://es6.ruanyifeng.com/

ES6中Class与export简单用法的更多相关文章

  1. java项目中ehcache缓存最简单用法

      java项目中ehcache缓存最简单用法: 1.下载ehcache-core-2.4.3.jar复制到项目的lib目录下 2.新建ehcache.xml文件,放置在项目src目录下的resour ...

  2. ES5和ES6中关于import & export的书写方式的区别

    ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...

  3. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...

  4. AngularJS中$http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  5. es6中的import,export浏览器已经支持

    直接上代码, 成功测验了es6的新特性 import , export语法. 服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段. ind ...

  6. WPF中StringToImage和BoolToImage简单用法

    在WPF的绑定控件操作中,经常会通过bool值或者某些特定的string值做出相应动作.但UI层控件的很多属性对应的都不是Bool值或者对应的只是固定的String值. 这个时候有两方法解决该问题. ...

  7. Vue中jsx的最简单用法

    最终页面显示效果为 <div class="open-service" style="color: #0199f0; cursor: pointer;"& ...

  8. SQL Server中row_number函数的简单用法

    一.SQL Server Row_number函数简介   ROW_NUMBER()是一个Window函数,它为结果集的分区中的每一行分配一个连续的整数. 行号以每个分区中第一行的行号开头. 以下是R ...

  9. sqlplus 中spool命令的简单用法

    spool基本格式: spool 路径+文件名 select col1||','||col2||','||col3||','||col4||'..' from tablename; spool off ...

随机推荐

  1. 【mysql报错】[Err] 1248 - Every derived table must have its own alias

    当我运行一条联合查询的sql语句时报如下错误: [Err] 1248 - Every derived table must have its own alias,大概意思是每一张派生表必须要有自己的别 ...

  2. operator ->重载是怎么做到的?

    https://stackoverflow.com/questions/8777845/overloading-member-access-operators-c struct client { in ...

  3. GO Slice

    一.切片(Slice) 1.1 什么是切片 Go 语言切片是对数组的抽象. Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数 ...

  4. python基础(20):序列化、json模块、pickle模块

    1. 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 1.1 为什么要有序列化 为什么要把其他数据类型转换成字符串?因为能够在网络上传输的只能是bytes,而能够 ...

  5. 从实例一步一步入门学习SpringCloud的Eureka、Ribbon、Feign、熔断器、Zuul的简单使用(附代码下载)

    场景 SpringCloud -创建统一的依赖管理: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102530574 Sprin ...

  6. xml的解析(概述)

    使用java解析xml☆☆☆ 四个类:分别是针对dom和sax解析使用的类   -dom :     DocumentBuilder:解析器类       -这个类是个抽象类,不能new,       ...

  7. Shadow broker=>fuzzbunch+metasploit 攻击外网测试以及metasploit大批量扫描目标IP

    0x01 前言 4月14日,影子经纪人在steemit.com上公开了一大批NSA(美国国家安全局)“方程式组织” (Equation Group)使用的极具破坏力的黑客工具,其中包括可以远程攻破全球 ...

  8. Dynamics CRM定制子网格添加按钮实例之二:调试代码、打开Web资源及获取选择的记录

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复222或者20160501可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  9. Dynamics 365利用HTML页面创建实体记录并同步上传附件

    我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  10. 干货，Wireshark使用技巧-过滤规则

    - 过滤规则使用 在抓取报文时使用的规则,称为过滤规则,Wireshark底层是基于Winpcap,因此过滤规则是Winpcap定义的规则,设置过滤规则后,抓到的报文仅包含符合规则的报文,其它报文则被 ...