一、创建类和生成实例
通过 class 关键字创建，类名首字符大写。
类里面有 constructor 函数，可以接受传递过来的参数，同时返回实例对象。
constructor 函数 只要 new 生成实例时，就会自动调用这个函数，如果不写这个函数，类也会自动生成这个函数。
生成实例 new 不能省略。
// 1.创建类 class class Star { constructor(name, age){ this.name = name this.age = age } // 在类中添加共有的方法 sing(song){ console.log(this.name + ' can sing ' + song); } } // 2.利用类创建对象 new let a = new Star('毛不易', 20) let b = new Star('不易', 22) console.log(a); console.log(b); a.sing('无名的人') b.sing('一荤一素')
二、类的继承
- 子类继承父类的 money 函数
// 1.类的继承 class Father { constructor(){ } money() { console.log(100); } } class Son extends Father { } let son = new Son() son.money() //100
- super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。
super 关键字调用父类中的 构造函数
// 1.类的继承 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){ super(x, y) //调用了父类中的构造函数 } } let son = new Son(1, 2) son.sum() //3
- 继承中的属性或者方法查找原则：就近原则
- 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的。
- 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法。
super 关键字调用父类的 普通函数
class Father { say() { return '我是爸爸' } } class Son extends Father{ say() { console.log('我是儿子'); } } let son = new Son() son.say() //我是儿子
class Father { say() { return '我是爸爸' } } class Son extends Father{ say() { console.log(super.say() + '的儿子'); //super.say() 调用父类中的普通函数 } } let son = new Son() son.say() //我是爸爸的儿子
- 子类在构造函数中使用 super，必须放到 this 前面（必须先调用父类的构造方法，再使用子类构造方法）
//父类有加法方法 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){ //调用父类的构造函数 (super 必须在子类 this 之前调用) super(x, y) this.x = x this.y = y } subtract() { console.log(this.x - this.y); } } let son = new Son(5, 3) son.subtract() //2 son.sum() //8
- 类里面的共有属性和方法一定要加 this 使用。
- constructor 里面的 this 指向实例对象，方法里面的
this指向这个方法的调用者。
let that; let _that; class Star{ constructor(uname){ // constructor 里面的 this 指向的是 创建的对象实例 that = this console.log(this); //Star {} this.uname = uname this.btn = document.querySelector('button') this.btn.onclick = this.sing } sing(){ // 这个sing方法里面的this 指向的是 btn 这个按钮 因为按钮要调用这个函数 console.log(this); //<button></button> console.log(that.uname); //毛不易 that 里面存储的是constructor里面的this } dance(){ // 这个dance里面的 this 指向的是实例对象a 因为 a 调用了这个函数 _that = this console.log(this); //Star {uname: '毛不易', btn: button} } } let a = new Star('毛不易') console.log(that === a); //true a.dance() console.log(_that === a); //true
