后端仔的React之路(二)

81 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情

ES6新特性-class

今天继续来学习ES6的新特性:class关键字,它用于实现部分类似面向对象编程的特性。

但他本质上还是个function,class关键字是个语法糖,只是为了简化对象原型的写法,他还是通过原形链和语法糖来实现的。

基本用法

class Student {
​
}
let student = new Student()
console.log(student) // Student

大致用法与我们所常用的面向对象语言没有什么区别。

构造方法

当我们使用new关键字时,会默认调用类中的constructor方法,即构造方法,当没有显性创建constructor时,会默认创建一个空参数的构造方法。

    class Student {
        constructor(name,age) {
            this.name = name
            this.age =age
        }
    }
    let student = new Student("Tom",18)
    console.log(student.name,student.age)

不过需要注意,与其他语言不同的是,类中同时只能有一个constructor方法存在,当定义多个构造方法时会出现以下错误。这也可以理解,因为本质上他还是个方法,当出现方法重载时,JS并不知道选择哪一个。

Uncaught SyntaxError: A class may only have one constructor

当一个类存在父类时,在构造方法需要显性调用super关键字,来调用父类的constructor方法。

需要注意,ES6并不会对变量进行提升,即浏览器是按顺序加载代码的,因此子类必须在父类后面声明、先声明类才能创建对应的对象。

    class People {
​
    }
​
    class Student extends People{
        constructor(name,age) {
            super()
            this.name = name
            this.age =age
        }
        constructor(name) {
        }
    }

同时在子类构造方法中,必须要先调用super方法才能使用this关键字,否则会抛出一个错误

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor...

静态方法

在class类中方法的定义就无需function关键字,当我们对方法加上static关键字时,该方法就变成了静态方法

静态方法只能被类本身调用,需要注意对象是无法调用的,这与大多数其他面向对象语言的静态方法不一致

class Student {
  static say() {
    return 'hello';
  }
}
​
Student.classMethod() // 'hello'var student = new Student();
student.say()
// TypeError: student.say is not a function

get和set函数

在class中可以使用getset关键字,对属性添加进行读取和存储操作函数,用于拦截属性得读取和存储的行为。

    class People {
        get name(){
            return "Tom"
        }
​
        set name(value){
            console.log(value)
        }
    }
    people = new People()
    console.log( people.name ); // Tom
    people.name = "Jerry"; // Jerry

学习资料