ES6中类的实现和继承

ES6中类的实现和继承

类的基本语法

ES6提供了更接近面向对象语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());

注意：生成类的实例对象的写法，要使用new命令。如果忘记加上new，像ES5函数那样调用Class，将会报错。

// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);

取值函数(getter)和存值函数(setter)

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

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

静态方法

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

1. 有 static关键字，表明该方法是一个静态方法
2. 需要通过类名来调用，而不是在实例 ( this )上调用
3. 如果使用this调用，或者在该方法中使用this。均会出现异常
4. 静态方法可以和非静态方法重名 ( 不推荐这样 )
5. 父类的静态方法，可以被子类继承

class Car {
      constructor(brand, factory) {
        this.brand = brand
        this.factory = factory
        this.wheel = 4
      }

      dreiver () {
        console.log(`${this.brand},启动发动`)
      }

      static isCar (car) {
        if (car.wheel === 4) {
          console.log('小汽车');
          return true
        } else {
          console.log('不算小汽车');
          return false
        }
      }
    }

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

constructor()方法

constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

类的继承

通过 extends 和 super 来实现继承效果
子类通过 extends 关键字来继承 父类所有的属性和方法
子类必须在 constructor 中调用 super 方法，否则新建实例会报错

 class Animal {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      sayName () {
        return this.name
      }
      syaAge () {
        return this.age
      }
    }

    //继承
    class Dog extends Animal {
      constructor(name, age, color) {
        super(name, age) //继承父类的属性要使用super 
        this.color = color
      }
    }

只需要一个extends 关键字即可轻松实现继承父类中的constructor属性

重写父类的方法

子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。

但是在很多情况下，父类中的方法是达不到子类的要求的，那么子类就可以有一下两个操作：

添加方法：

class Animal {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      sayName () {
        return this.name
      }
      syaAge () {
        return this.age
      }
    }

    //继承
    class Dog extends Animal {
      constructor(name, age, color) {
        super(name, age) //继承父类的属性要使用super 
        // Animal.call(this, name, age)
        this.color = color
      }
      //子类自己定义的方法
      sayColor () {
        return `${this.name}是${this.age}岁了，它的颜色是${this.color}`
      }
   }

重写父类的方法：

class Animal {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      sayName () {
        return this.name
      }
      syaAge () {
        return this.age
      }
    }

    //继承
    class Dog extends Animal {
      constructor(name, age, color) {
        super(name, age) //继承父类的属性要使用super 
        // Animal.call(this, name, age)
        this.color = color
      }
      //子类自己定义的方法
      sayColor () {
        return `${this.name}是${this.age}岁了，它的颜色是${this.color}`
      }
      //重写父类
      sayName () {
        return this.name + super.syaAge() + this.color
      }
    }