JS基础(十八) ES6中定义类的新语法

<script>

        /* // 定义一个Person类型

        class Person{

            // 构造函数

            constructor ( name,age,gender ){

                this.name = name,

                this.age = age

                this.gender = gender

            }

            // 给类添加一个方法

            sayHi() {

                console.log(this.name,this.age,this.gender)

            }

            //用这种方式定义的方法，是将方法定义到类的原型对象中去

            sayHello() {

                console.log('hello!')

            }

        } */

        // 继承

        /* // ES5:

        // 定义一个人类

        function Person(name, age, gender) {

            this.name = name

            this.age = age

            this.gender = gender

        }

        Person.prototype.eat = function () {

            console.log(`我叫${this.name},我在吃饭...`)

        }

        Person.prototype.say = function () {

            console.log(`大家好！我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)

        }

        // 通过Person类型，创建出了两个对象

        let p1 = new Person('刘德龙', 20, '男')

        p1.say()

        p1.eat()

        let p2 = new Person('高德政', 21, '男')

        p1.say()

        p1.eat()

        console.log('-------------------------------------')

        //定义了学生类

        function Student(name, age, gender, no) {

            // 继承Person类的属性

            Person.call(this, name, age, gender)

            // Student类特有的属性

            this.no = no

        }

        // 给Student类的prototype属性 new 一个Person类型的对象

        // 用于继承Person类的方法

        Student.prototype = new Person()

        Student.prototype.study = function () {

            console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)

        }

        let s1 = new Student('张三', 20, '女', '1001')

        s1.study()

        s1.eat()

        s1.say() */

        // ES6:

        // 定义人类

        class Person {

            // 定义构造函数

            constructor(name, age, gender) {

                this.name = name

                this.age = age

                this.gender = gender

            }

            // 说话方法

            say() {

                console.log(`大家好！我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)

            }

            // 吃方法

            eat() {

                console.log(`我叫${this.name},我在吃饭...`)

            }

        }

        // 每个类型都一个prototype属性，我们称它为类的原型对象。

        // 类的 原型对象中的成员 ，给类的 所有实例 （实例就是类创建出来的对象） 共享 。

        console.log(Person.prototype)

        // 通过Person类型，创建出了两个对象

        let p1 = new Person('刘德龙', 20, '男')

        console.log(p1)

        p1.say()

        p1.eat()

        let p2 = new Person('高德政', 21, '男')

        console.log(p2)

        p1.say()

        p1.eat()

        console.log('-------------------------------------')

        // extends关键字，表示继承

        class Student extends Person{

            // 构造函数

            constructor(name, age, gender,no){

                // 调用父类的构造函数

                super(name, age, gender)

                // 学生特有的属性

                this.no = no

            }

            //学生学习的方法

            study(){

                console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)

            }

        }

        let s1 = new Student('张三', 20, '女', '1001')

        console.log(s1)

        s1.study()

        s1.eat()

        s1.say()

</script>

使用bebel可以提前使用最新的JavaScript语言特性，这样编写很多代码的时候会变得简洁高效。并且babel转码之后生成的代码也是非常规范的ES5写法，同时是在严格模式下的。所以，我们在写ES201x代码的时候不需要再添加'use strict'标识。

所以：只需要将需要暴露给外部的变量或者方法 设置为exports的属性 就行，

可以把exports看做一个全局对象，把所有暴露出来的函数和变量都存放在里面

1.先写个6.js文件

CommonJS规范规定，每个模块内部，module变量代表当前模板，这个变量是一个对象，他的 exports 属性（相当于 module.exports ）是对外的接口。 这里详情请看我的另一篇文章： module、exports 和 require的关系

加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块

ES6模块化的使用方法：（注！因为CommonJS类库众多，以及 CommonJS 和 ES6 之间的差异，所以无法直接兼容es6。）

直接/按需导出：可使用多个 用变量/常量的方式

导入：需要用按需导入 {解构} 的方式获取

默认导出：只能使用一个 （default属性只有es6才有）可以用引入对象定义多个属性，但这样在引入后调用的时候，更麻烦。

导入：优点：可以直接使用文件做接收参数且不用结构。

重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

如果想看CommonJS与ES6模块化的原理 可以去看我另一篇文章

[秦圆圆]大佬写的 require和import的区别

[大孩子气]大佬写的 require/exports、import/export 的区别

[七分sunshine!]大佬写的# 前端模块化工具 requireJs的使用

---