ES6的class语法

ES6的class是什么?

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

ES5的传统面向对象写法

// ES5的传统写法
    function Cat(name, color) {
      this.name = name;
      this.color = color;
    }
    
    // 静态属性和方法 => 构造函数自己用
    Cat.msg = "这是构造函数Cat";
   
    // 动态的属性和方法 => 给通过当前构造函数创建的实例化对象
    Cat.prototype.species = "猫";
    Cat.prototype.call = function () {
      console.log("喵喵");
    };
    Cat.prototype.skill = function () {
      console.log("捉老鼠");
    };
    Cat.prototype.say = function () {
      console.log(this.name, this.color);
    };
    console.dir(Cat);

ES6类的写法

 class Cat {
      //  constructor  定义构造函数
      constructor(name, color) {
        this.name = name;
        this.color = color;
      }
      // 区别:1 如何定义静态属性和方法(static) => 构造函数自己用
      static msg = "这是构造函数Cat";
      static isCat() {
        if (args.constructor === Cat) {
          return true;
        }
        return false;
      }
      // // 区别:2 !!!!!!!
      species = "猫"; // 此属性不会存到原型对象(prototype)上,而是作为实例(通过构造函数创建的对象)的相关属性

      // 定义动态方法
      // 定义原型对象(prototype)上的方法(默认)
      call() {
        //函数一定要简写 
        console.log("喵喵");
      }
      skill() {
        console.log("捉老鼠");
      }
      say() {
        console.log(this.name, this.color);
      }
    }
    var Tom = new Cat("汤姆", "blue");
    console.log(Tom);
    console.log("静态(static):", Cat.msg);

打印结果

注意:

1. 如果想将species绑到原型对象上,就在class创建完毕之后,手动绑定

   Cat.prototype.species = "猫"
   

2. 什么是static静态方法?

   a:静态方法不能通过实例调用,只能通过类来调用
   
   b:如果静态方法中有this关键字,这个this指向的是类,而不是实例 , (注意,类中普通方法的this默认指向实例)
   

3. 类构造函数与构造函数的主要区别是,调用类构造函数必须使用类操作符

4. 在ES6中类没有变量提升 , 所以必须先定义类 , 才能通过类实例化对象

5. 类构造函数并没有什么特殊之处,实例化之后他会成为普通的实例化方法