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的进阶文章请看下一篇文章！