es6 - 类

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6 - 类脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

es6 类-class

与大多正规的面向对象编程语言不同(比如java),js在创建之初就不支持类。js的面向对象编程实现方式是通过构造函数和原型来实现的。

我之前以为es6引入类的概念将会带给这门语言极大的改变。后来才发现es6类的特性只是一种语法糖,使得js创建自定义类型和传统的面向对象语言语法上更为相似,其内部机理和之前构造函数-原型模式本质上是一样的。但是,es6 类的特性依然是值得掌握的,它使得js语言更加的严谨,消除了一些可能导致出错的状况。

语法

类的创建依赖于classconstructor两个关键字,下面介绍下类创建的语法。

创建自定义类型

看下面一段代码:

class PErson{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.LOG(this.name);
    }
}

上面代码使用class创建了一个自定义类型Person,constructor是这个类的构造器,sayName是类的公共方法。它和下面一段代码是等价的。

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.PRototype.sayName = function(){
    console.log(this.name);
}

二者在使用上完全相同,比如:创建一个Person的实例 new Person('icode007')等。一些小的差别主要有下面几点:

  • 使用class创建的类只能使用new来调用,而后者可以作为普通函数调用
  • class没有声明提升,后者作为函数会有声明提升。
  • 类声明中的代码自动运行在严格模式下。
  • 类的所有方法都是不可枚举的。

类表达式

与函数类似,类也具有两种形式,类声明和类表达式。

let Person = class{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.log(this.name);
    }
}

let person = new Person('icode007');

类表达式在使用上与类声明几乎没有区别

类的访问器属性

使用get和set关键字可以为类定义访问器属性。

let Person = class{
    constructor(Firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    get fullname(){
        return this.firstname + this.lastname;
    }
    set fullname(name){
        VAR arr = name.splIT(' ');
        this.firstname = arr[0];
        this.lastname = arr[arr.length - 1];
    }
}
let person = new Person('nicholas', 'zakas');
console.log(person.fullname);

类的静态成员

要定义类的静态方法,只需要在公共方法定义前加static关键字即可。如:

let Person = class{
    constructor(firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    static getFullname(){
        return this.firstname + this.lastname;
    }
}

要使用该静态方法,需要直接在类上调用,比如Person.getFullname()

类的继承

es6的类使用extends来实现继承。例如:

class Rectangle{
    constructor(length,width){
        this.length = length;
        this.width = width;
    }
    getArea(){
        return this.length * this.width;
    }
}

class Square extends Rectangle {
    constructor(length){
        super(length, length);
    }
    getPerimeter(){
        return this.length * 4;
    }
}
var sqr = new Square(5);
console.log(sqr.getArea()

上面代码中,类Square继承了Rectangle类,所以实例sqr同样具有getArea()方法。 同时sqr添加了自己的getPerimeter方法。并重写了构造器constructor

注意事项

在使用类继承的实现中,需要注意的点是:

  • 如果子类没有重写constructor方法,默认会调用父类的构造器方法。
  • 如果重写了constructor方法,那么需要显式的调用父类的构造器方法,即super(arg...),并且super()调用一定要放到构造器的最前面(准确的说是在使用this前需要调用super)。
  • 父类的静态成员同样会被继承到子类上。

最佳实践

es6的类的语法比较易于掌握,推荐在实际开发中,多使用class来创建自定义类型。 首先会使关于类的信息都包裹在一个class{}中,也会使得js中的类与其他语言的类的语法更加的统一

更多关于es6的内容,可以关注右侧专栏 - 学习ES6。

脚本宝典总结

以上是脚本宝典为你收集整理的es6 - 类全部内容,希望文章能够帮你解决es6 - 类所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。