2.33-ES6类与对象

红太狼 2023-07-16 14:59 5阅读 0赞

### ES6类与对象 ###

1 使用class创建类，new创建对象

2 类里面所有函数不需要写function

3 多个函数之间不需要添加逗号分割

class Student { 
                // 构造函数 接受传递来的参数 返回一个实例对象
                constructor(sname,age) { 
                    this.sname = sname;
                    this.age = age;
                }
    
                study() { 
                    console.log(this.sname + '是学霸');
                } 
                run() { 
                    console.log('running');
                }  
            }
            var zs = new Student('zs',22);
            var lily = new Student('lily',26);
            console.log(zs.sname,zs.age);
            console.log(zs.study === lily.study);  //true
            zs.run();

### ES6继承 ###

通过 extends 实现继承

class Fa { 
                constructor(name,age) { 
                    this.name = name;
                    this.age = age;
                }
                getMoney() { 
                    console.log(100000);   
                }
            }
    		//通过 extends 实现继承
            class Son extends Fa { 
                constructor(name,age) { 
                    // this.name = name;
                    // this.age = age;
                    // 调用父类构造函数 需要先调用父亲的构造函数，才能给自己的参数赋值
                    super(name,age);
                    this.xueli = '研究生';
                }
            }
            var son = new Son('wsc',34);
            son.getMoney();  
            console.log(son.age);

在继承中，实例化子类输出一个方法，先看子类有没有该方法，有就先执行子类的，假如子类里没有，则执行父类的。

class Fa { 
                say() { 
                    return '我是老爸';
                }
                drive() { 
                    console.log('driving');
                }
            }
    
            class Son extends Fa{ 
                say() {   
                    // 父亲方法的返回值 与 自身返回值拼接
                    console.log(super.say()+'我是儿子');
                }
                playComputer() { 
                    console.log('coding');
                }
            }
    
            var son = new Son();
            son.say();
            son.drive();

### ES6中类使用细节 ###

1 es6类没有变量提升 所以必须先定义类 后实例化对象

2 类中的方法this指向

var _this;
            class Student { 
                constructor(sname) { 
                    _this = this;
                    this.sname = sname;
                    //this.study();
                    this.btn = document.querySelector('input');
                    // 1 
                    this.btn.onclick = _this.study;
                    // 2 bind()只是绑定，不调用
                    // this.btn.onclick = this.study.bind(this);
                    // 3
                    // this.btn.onclick = () => { 
                    // this.study.call(this);
                    // }
                    // 4
                    // this.btn.onclick = () => { 
                    // this.study.apply(this);
                    // }
                }
                study() { 
                    console.log(_this.sname + 'work hard');
                    console.log(this.sname + 'work hard');
                }
            }  
            let s1 = new Student('jack');
            // s1.study();
            console.log(_this === s1); //true