ES5 构造函数的问题 :

• 构造函数 不能 new , 也能使用, 只是没有意义
• 构造函数 与 原型上的内容 需要分开使用

        // ES5 写法 :
        function Person() {
            this.a = 123
            this.b = 345
        }
        let p = Person() // ES5 不加 new 可以使用
        console.log(p);  // undefined  没有new, 当普通函数使用
        console.log(window);  // 属性在 window
        Person.prototype.init = function () { }

ES6类的语法 :

class 类名{
    constructor([参数]){
        //属性
        this.属性名 = 属性值;
    }
    //方法
    方法名([参数]){
        //功能
    }
}

ES6 写法 :

• 必须 通过new 调用
• 属性 和 方法 一起书写

        // ES6 写法 :
        class Stu {
            // 构造器, 类似于 ES5 构造函数的函数体
            constructor(num) {
                this.name = '张三'
                this.age = num
            }
            // 接下来位置 全都是原型的书写位置
            init() {
                console.log('我是原型是的 init的方法');
            }
            abc() {
                console.log('我是原型是的 abc的方法');

            }
            move() {
                console.log('我是原型是的 move的方法');

            }
        }
        const a1 = new Stu(18)
        console.log(a1);
        const a2 = new Stu(20)
        console.log(a2);
        a1.init()
        a1.move()
        const a3 = Stu(88) // ES6 必须 通过new 调用

选项卡案例 : ( ES6写法 )

 // ES6 写法 :
        class Tabs {
            // 构造器 类似 构造函数的函数体
            constructor(ele) {
                this.ele = document.querySelector(ele)
                this.headerLi = this.ele.querySelectorAll('.header li')
                this.contentLi = this.ele.querySelectorAll('.content li')
                this.init()
            }
            // 书写原型
            init() {
                let that = this
                this.headerLi.forEach(function (item, index) {
                    item.onclick = function () {
                        that.headerLi.forEach(function (li, liindex) {
                            li.classList.remove('active')
                            that.contentLi[[liindex]].classList.remove('active')
                        })
                        item.classList.add('active')
                        that.contentLi[index].classList.add('active')
                    }
                })
            }
        }
        new Tabs('.box1')
        new Tabs('.box2')

ES6 补充 :

模板字符串 ``:

• 在ES5 中, 要么是 单引号包裹, 要么是双引号包裹
• 而ES6 中, 推出的 模板字符串是 使用反引号包裹的
• 和之前的区别 :
  • 1. 反引号能够换行, 但是单引号 双引号不行
  • 2. 内部如果使用书写的 有 ${} 然后在内部可以识别出变量

展开运算符 :

• 在ES6 退出了展开运算符 ...
  • 能够展开 数组 或者 对象
• 展开数组 :

        let arr = [1, 2, 3]
        console.log(arr);  // (3) [1, 2, 3]
        console.log(...arr);  // 1 2 3

        // 2.1 合并数组
        let arr2 = [...arr, 100, 101, 102]
        console.log(arr2); // [1,2,3,100,101,102]

        // 2.2 函数传参
        function fn(a, b, c) {
            console.log('函数fn的形参', a, b, c);
        }
        fn(arr[0], arr[1], arr[2])  // 1 2 3
        fn(...arr) // 1 2 3

        // 2.3 展开对象
        let obj = {
            a: 1,
            b: 2
        }
        // console.log(...obj); // 不符合语法规范

• 展开对象 :
  • 1. 当对象的 key 和 value 相同的时候, 那么可以省略不写
  • 2. 方法可以省略 : function

        // 2.3 展开对象
        let obj = {
            a: 1,
            b: 2
        }
        // console.log(...obj); // 不符合语法规范

        let obj2 = {
            ...obj,
            c: 11,
            d: 12
        }
        console.log(obj2);  // {a: 1, b: 2, c: 11, d: 12}


        /*
            对象简写语法 :
                 1. 当对象的 key 和 value 相同的时候, 那么可以省略不写
                 2. 方法可以省略 : function
        */
        let name = '张三'
        let obj3 = {
            // name : '张三'  (写法一)
            name: name, // (写法二)
            name,  // (写法三)
            age: 100,
            fn: function () {
                console.log('我是对象obj 属性 fn 的属性值');
            },
            fn1() {
                console.log('我是fn1 函数');
            } // 推荐写法
        }
        console.log(obj3); // {name : '张三',age : 100}
        obj3.fn()
        obj3.fn1()