JavaScript ES6 面向对象类 笔记整理

0. 先总结：

最下面有对应的代码可以分别赋值测试

/*         1. 类和对象的概念 
           类，大类，手机 很多的手机的集合
           对象，具体的事物，比如小米8的一个具体的手机
        2. 面对对象的思维特点：
           我的目标是要生产很多个大大小小的对象
           知道这些对象有哪些共同的属性和方法
           属性和方法抽离出来生成一个类 就像一个汽车图纸
           汽车图纸 能够依靠它生产出很多很多无穷无尽的汽车 这些一个个的汽车就是对象 是具体的 比如明星是个类，那么迪丽热巴就是一个对象

        3. 声明一个类的过程解析
           1. clas关键字 + 类名 类名尽量大写 后面不加小括号
           2. 里面有constructor构造器，也叫构造函数，非常重要，注意：
              contructor构造器前面无需添加function
              new ('')传参时会自动调用函数contructor new关键字不能省略
              contructor函数
              作用1是接受传递过来的参数 能够进行赋值
              作用2是能够返回一个对象实例
            3. 执行的思路:
               1. 声明一个类，里面写好constructor函数
               2. 通过new 实例化一个类 传入参数
               3. new之后立马自动调用constructor构造器函数
               4. 函数里面赋值 自动返回return 一个新的实例对象


         4. 类里面如何添加方法
               1. 类里面的所有方法无需function 加了就报错
               2. 类里面函数与函数之间无需 逗号 加了就报错
               3. 直接写方法名，调用直接ldh.sing('冰雨') 这样

         5. 里面使用extends继承父类的方法
           父类里面有money方法 子类能够使用
           子类定义时使用 class Son extends Father {}
           const fa = new Son(1,2)
           fa.money() 之后子类就可以使用父类里面的方法

        
        6. 类继承的super关键字
           如果父类里面有构造函数和方法 
           子类里面有构造函数但是没有方法 子类想通过继承使用里面的方法
           直接使用会报错原因:
           1. 子类调用父类的方法 而父类的方法的this指向父类的构造器
           2. 父类并没有被new 也就没有触发构造器 没有传入进去参数 进而父类里面的参数访问不到 
           3. 要在子类的构造器里面使用 super()
        class Son extends Father {
            constructor(x, y) {
                super(1, 2)
            }
        }

        7. 继承中的查找原则
           **就近原则
           如果当前类有这个方法 就使用自己的这个方法
           如果当前类没有这个方法 就去父类查找 直到找不到为止
           **也可以通过super.say()这样去调用父类的普通函数

        8. 子类继承父类的方法 同时能够扩展自己的方法 
           比如子类自己声明减法操作 同时想使用父类的加法操作
           注意点:
                 1. 定义时 使用extends关键字
                    class Son extends Father
                 2. 使用时 super关键字 super(x, y) 传递关键字
                    切记 super写在this赋值之前 不然必定报错
                    constructor(x, y) {
                         super(x, y)
                         this.x = x;
                         this.y = y;
                    }              
 
        9. 类里面的使用注意点
           1. 类属于ES6语法 使用类 必须先声明 再创建新的实例 不然必定报错
           2. 类里面公共的属性和方法都必须加this 除了外部传递 参数
              比如下面的普通函数里面要打印构造函数里面的变量 要加this
              比如构造函数里面要调用普通函数 要加this.sing()
              也可以在里面写语句比如获取dom 绑定点击事件 点击触发 sing方法 获取的dom加this 调用方法也要加this

        
        10. 类里面的this指向问题
            1. 在类的构造器 里面的this指向创建的实例对象
            2. 在类里面的方法 里面的this方法的调用者
               如果是实例对象调用 this指向实例对象
               如果是别的比如按钮调用 this指向按钮
            3. 在类里 如果方法的this的调用者不是实例对象但是我们想在方法里面打印实例对象的属性name属性 就可以:
               声明一个全局变量that
               在构造器constructor里面 that = this
               在方法里面 打印that.name


           */

4. 类里面添加方法

        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age
            }
            sing(song) {
                console.log(this.name + song);
            }
        }
        const ldh = new Star('刘德华')
        const zxy = new Star('张学友')
        ldh.sing('冰雨')
        zxy.sing('李香兰')

5. 类 里面使用extends继承父类的方法

        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            money() {
                console.log(this.x, this.y);
            }
        }
        class Son extends Father {
            
        }
        const fa = new Son(1,2)
        fa.money()

6. 类继承的super关键字

        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
        }
        super使用
        class Son extends Father {
            constructor(x, y) {
                super(1, 2)
            }
        }
        let son = new Son(1, 2);
        son.sum(1, 2) 

7. 子类调用父类的普通函数

        class Father {
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father {
            say() {
                console.log('我是儿子');
                console.log(super.say() + '的儿子');
            }
        }
        const son = new Son();
        son.say() // 打印我是儿子

 8. 子类继承父类的方法 同时能够扩展自己的方法 

比如子类自己声明减法操作 同时想使用父类的加法操作  

        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum(x, y) {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y)
                this.x = x;
                this.y = y;
            }
            substract() {
                console.log(this.x - this.y);
            }
        }
        let son = new Son(2, 1)
        son.substract() // 1
        son.sum() // 3

9. 类里面的使用注意点

        class Father {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                // this.sing()
                this.btn = document.querySelector('button')
                this.btn.onclick = this.sing
            }
            sing() {
                console.log(this.name);
            }
        }
        let fa = new Father('刘德华')
        fa.sing()

10. 类里面的this指向问题

        let that;
        class Father {
            constructor(name, age) {
                console.log(this);
                that = this;
                this.name = name;
                this.age = age;
                // this.sing()
                this.btn = document.querySelector('button')
                this.btn.onclick = this.sing
            }
            sing() {
                console.log(this); // 打印出来的是按钮 按钮并不存在name属性 下面打印出来的应该是undefiend 但是不是
                console.log(this.name);
                console.log(that.name); // 刘德华
            }
        }
        let ldh = new Father('刘德华')
        ldh.sing()
        console.log(that === ldh); // true

转载请注明出处，找实习好难，加油