es6 - 类

notebin 发布于2019-08-22 15:18 / 2041人阅读

摘要：创建自定义类型看下面一段代码上面代码使用创建了一个自定义类型，是这个类的构造器，是类的公共方法。注意事项在使用类继承的实现中，需要注意的点是如果子类没有重写方法，默认会调用父类的构造器方法。

es6 类-class

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

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

语法

类的创建依赖于class和constructor两个关键字，下面介绍下类创建的语法。

创建自定义类型

看下面一段代码：

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。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93351.html

【ES6】更易于继承的类语法

摘要：的类使用熟悉的关键字指定类继承的函数，并且可以通过方法访问父类的构造函数。例如继承一个的类继承了，术语上称为基类，为派生类。例如注意到上例中，不仅是派生类的实例，也是派生类的实例，内建对象继承的实用之处是改变返回对象的类型。和其它面向对象编程语言一样，ES6 正式定义了 class 类以及 extend 继承语法糖，并且支持静态、派生、抽象、迭代、单例等，而且根据 ES6 的新特性衍...

Lionad-Morotar 2019-08-23 12:44 评论0 收藏0
ES6深入浅出 Classes

摘要：一步，一步前進一步深入浅出之。是构造函数，可在里面初始化我们想初始化的东西。类静态方法大多数情况下，类是有静态方法的。中添加类方法十分容易类方法和静态方法是同一个东西在的语法中，我们可以使用关键字修饰方法，进而得到静态方法。一步，一步前進の一步 ES6深入浅出之Classes。翻译的同时乱加个人见解，强烈推荐阅读原作者的文章，言简意赅。es6-classes-in-depth 类语...

array_huang 2019-08-23 10:45 评论0 收藏0
es6之js的类

摘要：生成的类的原型会被自动调整，而你还能调用方法来访问基类的构造器。唯一能避免调用的办法，是从类构造器中返回一个对象。起源 JS 从创建之初就不支持类，也没有把类继承作为定义相似对象以及关联对象的主要方式，这让不少开发者感到困惑。而从 ES1 诞生之前直到ES5 时期，很多库都创建了一些工具，让 JS 显得貌似能支持类。尽管一些 JS 开发者强烈认为这门语言不需要类，但为处理类而创建的代...

libin19890520 2019-07-31 10:15 评论0 收藏0
ES6学习总结（三）

摘要：不同于其他面向对象语言，以前的中中没有类的概念，主要是通过原型的方式来实现继承，中引入了原型链，并且将原型链用来实现继承，其核心是利用原型使得一个对象继承另一个对象的方法和属性，中原型继承的关键是将一个实例的原型对象指向另一个实例，因此前一不同于其他面向对象语言，ES6以前的JavaScript中中没有class类的概念，主要是通过原型的方式来实现继承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 评论0 收藏0
ES6 中Class创建对象与继承实现

摘要：使用类创建实例对象也是直接对类使用命令，跟中构造函数的用法一致。中没有构造函数，作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含...

zhou_you 2019-08-20 14:40 评论0 收藏0