阅读 225

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构造器内)!
文章分类
前端
文章标签