ES6中Class类的理解

 阅读约 9 分钟

在ES6中,class (类)通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
    类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

image.png

定义一个class类

class People{

//构造函数
constructor(name , age , sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

changge(){
    console.log("我是一个" + this.name + "今年" + this.age + "岁啦!!");
}

goDie(){
    console.log("死啦");
}

}

var xiaoming = new People("小明",12,"男");

虽然增加了class关键字,但是JS中还是没有类!JS中仍然是简单的“基于对象”原型链的模式来模拟类的。
也就是说,机理没有变化!

console.log(xiaoming.changge === People.prototype.changge); //true
console.log(xiaoming.hasOwnProperty("changge")); //false
console.log(xiaoming.hasOwnProperty("name")); //true

小结:

  • constructor是类People的构造函数
  • 类People都是定义在类People的原型prototype上,是prototype的属性;但是静态方法除外

    image.png

    image.png

类表达式和类声明

类声明:

class Person{
constructor(x,y){
this.x = x;
this.y = y
}
}

总结:

  • 类声明的时候,类名必须要大写
  • 函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

         var person= new Person()
           class Person {
               constructor(x, y) {
               this.x = x
               this.y = y
             }
           }
           // Personis not defined
    
  • 类声明不可以重复
  • 类必须使用 new 调用,否则会报错

     class Person {
           constructor(x, y) {
           this.x = x
           this.y = y
         }
       }
       Person()
       // TypeError Class constructor Person cannot be invoked without 'new'
    
    

类表达式(类定义)

类表达式可以是被命名的或匿名的

  * 匿名类 */ 
    let Person = class {
      constructor(x, y) {
        this.x = x
        this.y = y
      }
    }

    /* 命名的类 */ 
    let Person = class Person {
      constructor(x, y) {
        this.x = x
        this.y = y
      }
    }

类的方法

constructor方法

 constructor 方法是类的默认方法,在new 命令生成对象实例时,会自动调用constructor方法,同时默认返回实列对象的this;

一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person {
   constructor(x, y) {
    this.x = x    // 默认返回实例对象 this
    this.y = y
  }
  toString() {
    console.log(this.x + ', ' + this.y)
  }
}

静态方法

在类对象的内部的方法【constructor除外】前面加上static后,该方法就是静态方法了;静态方法是类的属性其他方法是类的原型属性。

注意:静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)     //  TypeError p.sum is not a function

原型方法

  • 类的所有方法都定义在类的 prototype 属性上面,
  • 在类的实例上面调用方法,其实就是调用原型上的方法
  • 原型方法可以通过实例对象调用,但不能通过类名调用,会报错
    class Person {
        constructor() {
            // 默认返回实例对象 this
        }
        sum() {

        }
        toString() {
            console.log('123456')
        }
    }
    // 给 Person 的原型添加方法
    Person.prototype.toVal = function() {
        console.log('I am is toVal')
    }

    // 等同于
    Person.prototype = {
      constructor() {},
      sum() {},
      toString() {}
    }

    var p = new Person()
    p.toString()       // 123456
    p.toVal()          // I am is toVal
    Person.toString()  // TypeError Person.toStringis not a function
    Person.toVal()  // TypeError Person.toVal is not a function

实例方法

实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

    class Person {
        constructor() {
            this.sum = function(a, b) {
                console.log(a + b)
            }
        }
    }
    var p = new Person()
    p.sum(1,2)       // 3
    Person.sum(1,2)  // TypeError Person.sum is not a function

总结方法

  • 除了静态方法是用类名调用的,其他方法都是用实例对象调用的;
  • 类的所有方法其实都是定义在类的原型属性上的
  • 生成对象实例的时候会自动调用constructor方法,并且返回实列对象的this
阅读 64更新于 12月7日
推荐阅读
目录