ES6中class类使用方法及教程（基础篇）

ES6中class类教程（基础部分）

一、constructor（构造器）（今后用的多）

• constructor构造器的作用就是，每当 new 这个类的时候，必会优先执行constructor构造器中的代码；

  传统构造函数：

  function Animal (name, age) {
   	   //实例属性
           this.name = name;
           this.age = age;
       }
  const a1 = new Animal('dog', 3);
  

  class类：

  class Animal {
           constructor(name, age){
               //实例属性
               this.name = name;
               this.age = age;
           }
       }
  const a2 = new Animal('cat', 2);
  

• 每一个class类中，都有一个constructor构造器，如果没有手动指定constructor构造器，那么可以认为class类内部，有个隐形的，空的constructor构造器。

  class Animal {
   //constructor(){ 这里就是隐形的，空的constructor构造器
  //}
  }
  

二、使用 static 创建静态属性（今后用的不多）

• 什么是静态属性：
  通过 “构造函数” 直接访问到的属性；
  例如下面的 sounds，直接挂载给了 Animal ，所以 sounds 是 静态属性

  	function Animal (name, age) {
          this.name = name;
          this.age = age;
      }
      Animal.sounds = 'yayaya';
      console.log(Animal.sounds)// yayaya
  
      const a1 = new Animal('dog', 3);
      console.log(a1.sounds)// undefined
      console.log(a1.name)//dog
      console.log(a1.age)//3
  

  相反的是，name，age，能被new出来的实例a1所访问到，所以 name 和 age 是 实例属性

• 在 class 内部怎么定义 静态属性
  通过 static 关键字修饰的属性，就是 静态属性

  	class Animal {
           constructor(name, age){
               this.name = name;
               this.age = age;
           }
           static sounds = 'yayaya';
       }
       console.log(Animal.sounds)//yayaya
  
       const a2 = new Animal('cat', 2);
       console.log(a2.sounds)//undefined
       console.log(a2.name)//cat
       console.log(a2.age)//2
  

三、实例方法（今后会经常用到）

• 什么是 实例方法 ：
  能被new出来的实例所访问的方法

• 传统构造函数定义实例方法的方式：

  	function Animal (name, age) {
           this.name = name;
           this.age = age;
       }
       Animal.prototype.sounds = function () {
           console.log('yayaya')
       }
  
       const a1 = new Animal('dog', 3);
       a1.sounds()//yayaya
  

• class类中，定义实例方法的方式：

  	class Animal {
           constructor(name, age){
               this.name = name;
               this.age = age;
           }
           sounds () {
               console.log('yayaya')
           }
       }
  
       const a2 = new Animal('cat', 2);
       a2.sounds()//'yayaya'
  

  class内部定义实例方法，与constructor，static平级定义

• 通过控制台打印 a1 和 a2 可以看到，实例方法都是定义在了原型链上，所以两种方法本质上并没有区别。

四、使用 static 创建静态方法（今后用的不多）

• 静态方法就是挂载到构造函数上的方法，new 出来的 实例 访问不到；

• 传统构造函数定义静态方法的方式：

  	function Animal (name, age) {
           this.name = name;
           this.age = age;
       }
       Animal.sounds = function () {
           console.log('yayaya')
       }
       Animal.sounds() //yayaya
  
       const a1 = new Animal('dog', 3);
       a1.sounds()// 报错：a1.sounds is not a function
  

• class类 内部定义静态方法的方式：

  	class Animal {
           constructor(name, age){
               this.name = name;
               this.age = age;
           }
           static sounds () {
               console.log('yayaya')
           }
       }
       Animal.sounds() //yayaya
  
       const a2 = new Animal('cat', 2);
       a2.sounds() // 报错：a2.sounds is not a function
  

  在class类内部，定义静态属性和静态方法都是通过static关键字来修饰的！

注意事项：

• 在class类内部的{ }区间内，只能写constructor构造器、static静态方法、static静态属性和实例方法（实例属性在constructor构造器内）！
• class类中extends，super的进阶文章请看下一篇文章！