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：

http://es6.ruanyifeng.com/

 

posted @ 2019-10-11 15:26  ryelqy  阅读(13360)  评论(0)  编辑  收藏  举报