【js面向对象ES6】-学习笔记

本文是看b站大佬教程视频做的学习笔记，链接：https://www.bilibili.com/video/BV1Kt411w7MP

学习笔记：

P2：面向对象：封装性、继承性、多态性

P3：类：抽象了对象的公共部分，泛指某一大类，

          对象：可由类实例化生成，特指某一个（包含属性+方法）

P4：类里都会有一个构造函数constructor(){ }，用new Person()实例化来生成对象时会自动调用constructor执行，（如果不写constructor(){ }函数，类也会自动生成这个函数）

          定义一个类写成 class Person { }，首字母大写、类中的方法不写function关键字

P5：类中的方法不写function关键字、类里多个函数之间不加逗号间隔

P6：super：子类使用super可以用来调用父类的构造函数，还可以调用父类的普通函数，且super必须写在this的前面

  class Father {
    constructor(x, y) {
      this.x = x
      this.y = y
    }
    sum() {
      console.log("sum::",this.x + this.y)
    }
  }
  class Son extends Father {
    constructor(x, y) {
      super(x,y)  //调用父类的构造函数,super必须写在this之前，否则会报错
      this.x = x
      this.y = y
      super.sum()  //调用父类的普通方法
    }
    substract () {  //子类除了继承父类方法，还扩展了方法
      console.log("substract::",this.x-this.y)
    }
  }
  let son = new Son(3, 4)
  son.sum()
  son.substract()

由于上面super.sum()和son.sum()各调用一次，所以最后打印了两次

如果没有super(x,y)或super没在this前面都会报下面的错，

P7：类的继承中，如果实例化子类且输出一个方法，会先去看子类有没有这个方法，如果有就执行子类的，如果没有，就去父类找有没有这个方法，如果有就执行父类的这个方法（就近原则）

P8：super必须写在this之前，否则会报错

P9：类没有变量提升，所以必须先定义类再实例化对象，类共有的属性和方法一定要加this

P10：类里的constructor里的this指向实例化对象，而类里的方法指向调用者（这个时候this就不一定指向实例化对象了，比如可以指向一个按钮...）

  let _this = ""
  class Singer {
    constructor(name) {
      _this = this  //直接在这里let _this = this会报错
      this.name = name
      this.btn = document.querySelector('button')
      this.btn.onclick = this.sing  
    }
    sing() {
      console.log(this)  //类里的constructor里的this一定指向实例化对象，而类里的方法指向调用者（这个时候this就不一定指向实例化对象了，比如可以指向一个按钮...）
      console.log(_this.name)  //_this是constructor里的this，如果 console.log（this.name)打印为空，因为btn没有name这个属性
    }
  }
  let singer = new Singer("qyl")

在有的浏览器里，this.name显示为undefined

 

P11：面向对象tab栏案例，

 

 

 

 

 

 

 

 

 

 

 

 

 

 

else：

1.如果不写constructor(){ }函数，类也会自动生成这个函数

2.类继承的就近原则，所有情况都来一遍