ES6 类class

定义类：类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

类声明
定义一个类的一种方法是使用一个类声明。要声明一个类，你可以使用带有class关键字的类名

{
  //基本定义和生成实例
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }
  }
  //生成一个实例
  let v_parent = new Parent('v');
  console.log('构造函数和实例',v_parent); // 构造函数和实例 Parent {name: "v"}
}

继承

{
  //继承
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }
  }

  //通过extends关键字实现继承
  class Child extends Parent{

  }

  console.log('继承',new Child()); //继承 Child {name: "mukwwang"}
}

{
  //继承 向父类传递参数
  //父类
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }
  }

  //通过extends关键字实现继承
  //子类
  class Child extends Parent{
    constructor(name='child'){
      //一个构造函数可以使用 super 关键字来调用一个父类的构造函数。  
      super(name);//向父类传递参数 必须放在constructor中的第一行
      this.type = 'child';
      this.age = '18';
    }
  }

  console.log('继承',new Child('hello')); //继承 Child {name: "hello", type: "child", age: "18"}
}

getter和setter

{
  //getter , setter
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }

    //读取
    //这里的longName是属性 不是函数方法
    get longName(){
      return 'mk' + this.name;
    }

    //赋值
    set longName(value){
      this.name = value;
    }
  }

  let v = new Parent();
  console.log('getter',v.longName); // getter mkmukwwang
  v.longName = 'hello!';
  console.log('setter',v.longName); // setter mkhello!
}

静态方法
static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。

{
  //静态方法
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }

    //通过static关键字定义静态方法
    static tell(){
      console.log('tell');
    }
  }

  //静态方法只能通过类来调用 实例不能调用
  Parent.tell(); //tell

}

静态属性

{
  //静态属性
  class Parent{
    //构造函数
    constructor(name='mukwwang'){
      this.name = name;
    }

    //通过static关键字定义静态方法
    static tell(){
      console.log('tell');
    }
  }

  //静态属性得在类上直接定义
  Parent.type = 'test';
  console.log('静态属性',Parent.type); //静态属性 test
}

提升
函数声明和类声明之间的一个重要区别是函数声明会提升，类声明不会。你首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError：

{
  let p = new Rectangle(); 
  // ReferenceError 引用错误

  class Rectangle {}
}

使用 extends 创建子类

//使用 extends 创建子类
//extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类。
//如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
{
  class Animal {
    constructor(name) {
      this.name = name;
    }

    speak() {
      console.log(this.name + 'makes a noise');
    }
  }

  class Dog extends Animal {
    // constructor(name = 'xixi'){
    // super(name); 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
    //console.log(this.name + ' barks');
    // }
    speak() {
      console.log(this.name + ' barks');
    }
  }

  let d = new Dog('Mitzie');
  d.speak(); //Mitzie barks
}

也可以扩展传统的基于函数的“类”

//也可以扩展传统的基于函数的“类”
{
  //传统的基于函数的“”类  
  function Animal (name) {
    this.name = name;  
  }
  Animal.prototype.speak = function () {
    console.log(this.name + ' makes a noise.');
  }
  
  class Dog extends Animal {
    speak() {
      super.speak();
      console.log(this.name + ' barks.');
    }
    // constructor(name = 'xixi'){
    //   console.log(this.name + ' barks.');
    //如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
    //   super(name); //报错 
    // }
  }
  
  var d = new Dog('Mitzie');
  d.speak();//Mitzie makes a noise.  Mitzie barks.
}

总结：ES6的类相比ES5简洁，增加了一些方法和属性，它的好处还需要在后面应用到了才能体会到，目前先熟悉和掌握它的语法，一步步细品！

参考链接：
类 javascript | MDN

猜你喜欢