ECMA 2015 知识点记录

小结：class 本质是构造函数，用于创建对象的。

ES6 之前的写法

        // 构造函数用于创建对象实例
        function Point1(x, y) {
            // 对象的属性
            this.x = x;
            this.y = y;
            this.state = { msg: 111 };
        }
        // 对象的方法
        Point1.prototype.toString = function () {
            return `(${this.x},${this.y})`;
        }

        // ES6新增的写法：其实就是之前构造函数的语法糖
        class Point2 {
            // 类的构造函数
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.state = { msg: 111 };
            }
            
            // 类的原型上的方法
            toString() {
                return `(${this.x},${this.y})`;
            }
        }

        const p1 = new Point1(1,2);
        const p2 = new Point2(3,4);

        console.log(p1);
        console.log(p2);

// 简洁的语法格式
class Point2 {
            // 给新对象添加属性
            x = 1;
            y = 2;
            state = { msg: 111 };

            // 类的原型上的方法
            toString() {
                return `(${this.x},${this.y})`;
            }
        }

        const p2 = new Point2();
        console.log(p2);

         小结： 如果类的构造函数不涉及到参数的传递，可以省略掉 constructor 和 this.xxx

// ES6 类的继承学习
class Person{
           constructor(){
               this.name = '人类';
               this.age = 1;
           }
           say(){
               console.log(this,`${this.name}的年龄是${this.age}`);
           }
        }

        // extends 继承 - 相当于实现了组合继承
        class Student extends Person{
            constructor(){
                // 官方规定的，先继承父类的属性
                super();
                // 在写子类自己的属性
                this.name = '班长';
            }
        }

        const p1 = new Person();
        p1.say();

        const stu1 = new Student();
        stu1.say();

this指针的指向操作

call apply bind
共同点：三个都能改变函数内 this 的执行
不同点：
1. call apply 是会调用的。
2. bind 不会调用，是返回了一个新的函数，那个函数已经对 this 进行了绑定

        // call 和 apply 都能调用函数。区别是？
        // fupo.say.call(ds);  // 把函数内部的 this 指向变成了 ds
        fupo.say.bind(ds);  // 把函数内部的 this 指向变成了 ds  但是不会调用say方法

总结
1. 普通函数定义的时候，其实并不能确定 this 的指向。
2. 普通函数在被调用的时候才会确定 this 的指向。
3.bind 有两种实参的方式：
//          1. bind(新this, 参数1, 参数2 );
//          2. const fn = bind(新this);   fn( 参数1, 参数2 );

        const obj = {
            data: [
                { id: 1, name: '菠萝' },
                { id: 2, name: '雪梨' },
                { id: 3, name: '榴莲' }
            ],
            code: 200,
        }

        const newObj = { ...obj };

        console.log(newObj === obj);                // false

        console.log(newObj.data === obj.data);      // true

        // 不管是解构赋值，还是展开运算符，其实都不是深拷贝。

DEEP CLONE 深拷贝 除开利用JSON.parse实现的方式

// 深拷贝：两个对象包括里面的引用全部都不一样
什么时候才会用到深拷贝?//    希望改变一个对象数据的时候，不影响另一个对象时候。
        function deepClone(obj) {
            let objClone = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj === "object") {
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        //判断ojb子元素是否为对象，如果是，递归复制
                        if (obj[key] && typeof obj[key] === "object") {
                            objClone[key] = deepClone(obj[key]);
                        } else {
                            //如果不是，简单复制
                            objClone[key] = obj[key];
                        }
                    }
                }
            }
            return objClone;
        }