class的基本介绍和使用

创建类并生成实例

// 通过class创建一个类
    class People{
// 类里面constructor函数可以接收传递的参数，同时返回实例化对象
// constructor只要new生成实例时，就会自调用这个函数，如果不写这个函数，类也会自动生成
        constructor(uname,age){
            this.uname=uname
            this.age=age
        }
    }
    //利用类创建对象new
  var lhc= new People("令狐冲",20)
  var dfbb=new People("东方不败")
  console.log(lhc.uname,lhc.age);
  console.log(dfbb.uname);

在类当中添加共有属性

// 通过class创建一个类
    class People{
// 类里面constructor函数可以接收传递的参数，同时返回实例化对象
// constructor只要new生成实例时，就会自调用这个函数，如果不写这个函数，类也会自动生成
        constructor(uname,age){
            this.uname=uname
            this.age=age
        }
        // 共有属性
        kangfu(wg){
            console.log(this.uname+wg);
        }
    }
    //利用类创建对象new
  var lhc= new People("令狐冲",20)
  var dfbb=new People("东方不败")
  console.log(lhc.uname,lhc.age);
  console.log(dfbb.uname);
//   注：类里面所有的函数不用写function，多个函数方法之间不需要符号分割
 lhc.kangfu("独孤九剑")
 dfbb.kangfu("葵花宝典")

类的继承extends

// 类的继承:extends
class Father{
    constructor(){

    }
    money(){
        console.log(100);
    }
}
class Son extends Father{

}
var son=new Son()
son.money()
// 100

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指向的是父类数据
            // this.x=x
            // this.y=y
            // 调用了父类的构造函数
            super(x,y)
        }
    }
    var son = new Son(5, 8)
    son.sum()
    // 13

继承中的注意事项:

 class Father{
        say(){
            return "father"
        }
    }
    class Son extends Father{
        say(){
            // console.log("son");
            console.log(super.say());// 调用父类
        }
    }
    var son=new Son()
    son.say() 
    // 打印的是son，继承中的就近原则，子类有执行子类，子类没有就查找父类
// 打印的是Father

子类拥有自己属性的同时再继承父类属性时，注意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){
    // 注意：利用super调用父类的构造函数
    // 必须在子类之前调用，否则会报错
    super(x,y)
    this.x=x
    this.y=y
    // super(x,y)在这个地方调用报错
  }
  sum1(){
    console.log(this.x-this.y);
  }
}
   var son=new Son(9,2)
   son.sum()//    11
   son.sum1()//7    

使用类的注意事项：

// var dfbb=new People("东方不败")报错，类里面无变量提升
    class People{
        constructor(uname){
            this.uname=uname
            // kangfu()无法调用必须先加this
            this.kangfu()
        }
        kangfu(){
            console.log(this.uname);
        }
    }
   

  var dfbb=new People("东方不败")
//  在es6中的类没用变量提升，所以必须先定义类，才能通过类实例化对象
// 类里面的共有属性和方法一定要加this使用

类里面的this指向问题

<button>按钮</button>
<script>
    var that;
    var _that;
class People{
        constructor(uname){
            // 把 constructor里的this赋值给全局变量
            _that=this
            this.uname=uname
            // kangfu()无法调用必须先加this
            this.kangfu()
            // console.log(this);指向的是创建的实例化对象
            this.btn=document.querySelector("button")
            this.btn.onclick=this.sing//不加（）防止立即调用，只用点击才会调用 
        }
        sing(){
            // this指向的是btn按钮，因为按钮调用了
            console.log(this);
            console.log(this.uname);// 点击按钮会发现出现undefind 因为this指向btn，btn没有该属性
            console.log(_that.uname); // 更换成_that就能拿到了    
        }
        kangfu(){
            console.log(this.uname);
            that=this
            console.log(this);
        }
    }
   

  var dfbb=new People("东方不败")
//   console.log(that===dfbb);true说明this指向调用者

</script>

取值函数（getter）和存值函数（setter）

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class Phone {
      constructor(price) {
        this.price = price
      }
      get price () {
        return this._price
      }
      set price (newPrice) {
       
        this._price = newPrice
      }
    }
    let inst= new Phone (300)
    console.log(inst.price);// 打印原值300
    inst.price=666//设置存值函数 setter 666
    console.log(inst.price);// 取值函数getter 666

静态属性和静态方法static：

所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

 class Foo {
  static classMethod() {
    console.log(this);// 静态方法中的this,并不指向实例对象；// 此处，this指向class 本身
    return 'hello';
  }
}

console.log(Foo.classMethod()); // 'hello'

var foo = new Foo();//报错，静态方法不会被实例继承 
foo.classMethod()

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

  class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}
new MyClass()