ES6中class的使用

在ES6之前创建类的方式与用class创建类的方式的区别:

function Person(name, age) {
    this.name = name
    this.age = age
}
var person = new Person('张三', 18)

class Person {
    // 这是Person的构造器
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
var person = new Person('李四', 20)

每个类中都有一个构造器,如果没有手动指定构造器,那么,可以认为类内部中有一块隐藏的构造器,类似于constructor(){},每次执行 new 时,会优先执行构造器中的代码。

实例属性与静态属性

在声明类时,构造函数上传入的属性,称为实例属性。直接挂载到类上的属性,称为静态属性,静态属性无法在实例中调用。ES6 class关键字,静态属性的声明方式:

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static info = '这是一个静态属性'
}
var person = new Person('张三', 18)
console.log(person.name)    // 张三
console.log(person.info)    // undefined
console.log(Person.info)    // 这是一个静态属性

实例方法与静态方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 实例方法
    sayHello() {
        console.log('Hello, ' + this.name)
    }
    // 静态方法
    static eat() {
        console.log('eat')
    }
}
var person = new Person('张三', 20)
person.sayHello()   // Hello, 张三
person.eat()        // undefined
Person.eat()        // eat

继承

class通过extends关键字实现继承

语法:class 子类 extends 父类 {}

原代码:

class Chinese {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class American {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

通过extends继承:

// 父类
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log('Hello, ' + this.name)
    }
}
// 子类
class Chinese extends Person {}
class American extends Person {}

var zs = new Chinese('张三', 18)
var jack = new American('jack', 18)

super函数的使用

  1. 如果一个子类通过extends关键字继承了父类,那么在子类的constructor中必须优先调用一次super()
  2. super是一个函数,父类的构造器,子类中调用super,就是对父类构造器的引用。
  3. 在子类中,this只能放在super后使用。

示例:

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class Chinese extends Person {
    constructor(name, age, idcard) {
        super(name, age)
        this.idcard = idcard
    }
}

注意

  1. class{ ... }区间内,只能写构造器、静态方法、静态属性、实例方法、实例属性。
  2. class关键字内部还是使用原来的方法实现,为JavaScript的语法糖。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。