ES6类的使用

ES6类的定义

创建类的方式

类的声明

class Person{
    
}

类的表达式

var Person = class {
    
}

类的特点

class Person{

}

console.log(Person.prototype)//Person {}
console.log(Person.prototype.constructor)//[Function: Person]
console.log(Person.prototype.__proto__)//{}
console.log(typeof Person)//function

类的构造函数

class Person{
    //类的构造函数
    constructor(name,age){
        this.name = name
        this.age = age
    }
} 

var p1 = new Person("okarin",19)
console.log(p1)//Person { name: 'okarin', age: 19 }

类的方法的定义

类的实例方法

class Person {
    //类的构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    //类的实例方法
    running() {
        console.log(this.name + 'running~');
    }
}

var p1 = new Person('okarin', 19);
console.log(Object.getOwnPropertyDescriptors(Person.prototype));

//{
//  constructor: {
//    value: [Function: Person],
//    writable: true,
//    enumerable: false,
//    configurable: true
//  },
//  running: {
//    value: [Function: running],
//    writable: true,
//    enumerable: false,
//    configurable: true
//  }
//}

类的访问器方法

class Person {
  //类的构造函数
  constructor(name, age,address) {
    this.name = name
    this.age = age
    this._address = address
  }

//类的访问器方法
  get address(){
      return this._address
  }
  set address(newAddress){
      this._address = newAddress
  }
}

var p1 = new Person("okarin", 19,"成都")

console.log(p1.address)//成都
p1.address = "北京"
console.log(p1.address)//北京

类的静态方法(类方法)

普通的实例方法一般通过对象进行访问的，而类的静态方法一般是通过类名进行访问。

class Person {
    //类的构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    static defaultPerson(){
        var name = "okarin"
        var age = 18
        return new Person(name,age)
    }

}

var p1 = Person.defaultPerson();
console.log(p1);//Person { name: 'okarin', age: 18 }

ES6类的继承

extends关键字

class Person{

}

class Student extends Person{

}

super关键字

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
}

class Student extends Person{
    constructor(name,age,sno){
        super(name,age)
        this.sno = sno
    }
}

var p1 = new Student('okarin',19,1001);
console.log(p1);

方法的重写

在子类中对父类的方法进行重写

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  running() {
    console.log(this.name + " running~")
  }
  personMethod() {
    console.log("method 1")
    console.log("method 2")
    console.log("method 3")
  }
}

class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }
  running() {
    console.log("Student " + this.name + " running~")
  }
  personMethod() {
    super.personMethod()
    console.log("method 4")
    console.log("method 5")
    console.log("method 6")
  }
}

var p1 = new Student("okarin", 19, 1001)
console.log(p1)
p1.running()
p1.personMethod()
// Student okarin running~
// method 1
// method 2
// method 3
// method 4
// method 5
// method 6

重写静态方法

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  static defaultPerson(){
    var name = "okarin"
    var age = 18
    return new Person(name,age)
}
  
}

class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }

  static defaultPerson(){
    var name = "Retr0"
    var age = 18
    return new Person(name,age)
}
}

var p1 = Student.defaultPerson()
console.log(p1)

//Person { name: 'Retr0', age: 18 }

继承内置类

class OnArray  extends Array{
    first(){
        return this[0]
    }

    last(){
        return this[this.length -1]
    }
}

var array = new OnArray(1,2,3)
console.log(array.first())

类的混入

在JS中只能有一个父类 ：单继承

可以使用函数来实现混入

function mixinRunner(BaseClass) {
  return class extends BaseClass {
    running() {
      console.log("running~")
    }
  }
}

class Person {}

class Student extends Person {}

var NewStudent = mixinRunner(Student)
var ns = new NewStudent()
ns.running()

JavaScript中的多态