9159金沙游艺场-奥门金沙游艺场-[欢迎您]

9159金沙游艺场为您呈现最新的面貌!,目前注册送体验金,欢迎您将成为影视娱乐行业新的风向标,是亚洲的优质娱乐先锋。

javascript ES 6 class 详解

日期:2020-01-04编辑作者:前端

javascript ES 6 class 详解

Introduction

 

上篇文章大致介绍了一些ES6的特性,以及如何在低版本浏览器中使用它们。本文是对class的详解。

译自Axel Rauschmayer的Classes in ECMAScript 6

另外,如果只是想测试ES6,可以到这个网站。

 

Overview

 

借助class 我们可以写出这样的代码:

 

   class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
    }

    class ColorPoint extends Point {
        constructor(x, y, color) {
            super(x, y);
            this.color = color;
        }
        toString() {
            return super.toString() + ' in ' + this.color;
        }
    }

    let cp = new ColorPoint(25, 8, 'green');
    cp.toString(); // '(25, 8) in green'

    console.log(cp instanceof ColorPoint); // true
    console.log(cp instanceof Point); // true
Base classes

我们可以定义如下的class:

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }

 

    }

我们可以像使用ES5标准中的constructor一样实例化class

 

    > var p = new Point(25, 8);

    > p.toString()

    '(25, 8)'

实际上,class还是用function实现的,并没有为js创造一个全新的class体系。

 

    > typeof Point

    'function'

但是,与function相比,它是不能直接调用的,也就是说必须得new出来

 

    > Point()

    TypeError: Classes can’t be function-called

另外,它不会像function一样会被hoisted(原因是语义阶段无法解析到extends的内容)

 

  

  foo(); // works, because `foo` is hoisted
    function foo() {}
    new Foo(); // ReferenceError
    class Foo {}
    function functionThatUsesBar() {
        new Bar();
    }

    functionThatUsesBar(); // ReferenceError
    class Bar {}
    functionThatUsesBar(); // OK

 

与函数一样,class的定义表达式也有两种,声明形式、表达式形式。之前用的都是声明形式,以下是表达式式的:

 

    const MyClass = class Me {
        getClassName() {
            return Me.name;
        }
    };
    let inst = new MyClass();
    console.log(inst.getClassName()); // Me
    console.log(Me.name); // ReferenceError: Me is not defined
Inside the body of a class definition

 

 

class定义体是只能包含方法,不能包含属性的(标准定义组织认为原型链中不应包含属性),属性被写在constructor中。以下是三种会用到的方法(constructor 、static method、 prototype method):

 

    class Foo {
        constructor(prop) {
            this.prop = prop;
        }
        static staticMethod() {
            return 'classy';
        }
        prototypeMethod() {
            return 'prototypical';
        }
    }
    let foo = new Foo(123);

 

如下图([[Prototype]]代表着继承关系)当对象被new出来,拿的是Foo.prototype : Object分支,从而可以调prototype method

 

constructor,这个方法本身,代表了class

 

    > Foo === Foo.prototype.constructor

    true

constructor有时被称为类构造器。相较于ES5,它可以调用父类的constructor(使用super())。

 

static methods。它们归属于类本身。

 

    > typeof Foo.staticMethod
    'function'
    > Foo.staticMethod()
    'classy'
关于Getters and setters,它们的语法如下:

    class MyClass {
        get prop() {
            return 'getter';
        }
        set prop(value) {
            console.log('setter: '+value);
        }
    }
    > let inst = new MyClass();
    > inst.prop = 123;
    setter: 123
    > inst.prop
    'getter'
方法名是可以动态生成的

    class Foo() {
        myMethod() {}
    }

    class Foo() {
        ['my'+'Method']() {}
    }

    const m = 'myMethod';
    class Foo() {
        [m]() {}
    }

 

增加了迭代器的支持,需要给方法前面加一个*

    class IterableArguments {
        constructor(...args) {
            this.args = args;
        }
        * [Symbol.iterator]() {
            for (let arg of this.args) {
                yield arg;
            }
        }
    }

    for (let x of new IterableArguments('hello', 'world')) {
        console.log(x);
    }

    // Output:
    // hello
    // world
Subclassing

 

 

通过extends,我们可以继承其它实现constructor的函数或对象。需要注意一下,constructor与非constructor调用父类方法的途径是不同的。

 

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
    }

    class ColorPoint extends Point {
        constructor(x, y, color) {
            super(x, y); // (A)
            this.color = color;
        }
        toString() {
            return super.toString() + ' in ' + this.color; // (B)
        }
    }
    > let cp = new ColorPoint(25, 8, 'green');
    > cp.toString()
    '(25, 8) in green'

    > cp instanceof ColorPoint
    true
    > cp instanceof Point
    true
子类的原型就是它的父类

    > Object.getPrototypeOf(ColorPoint) === Point
    true
所以,static method也被继承了

    class Foo {
        static classMethod() {
            return 'hello';
        }
    }

    class Bar extends Foo {
    }
    Bar.classMethod(); // 'hello'
static方法也是支持调用父类的。

   class Foo {
        static classMethod() {
            return 'hello';
        }
    }

    class Bar extends Foo {
        static classMethod() {
            return super.classMethod() + ', too';
        }
    }
    Bar.classMethod(); // 'hello, too'

 

关于子类中使用构造器,需要注意的是,调用this之前,需要调用super()

 

    class Foo {}

    class Bar extends Foo {
        constructor(num) {
            let tmp = num * 2; // OK
            this.num = num; // ReferenceError
            super();
            this.num = num; // OK
        }
    }
constructors是可以被显示覆盖(override)的。

    class Foo {
        constructor() {
            return Object.create(null);
        }
    }
    console.log(new Foo() instanceof Foo); // false

 

如果基类中不显示定义constructor,引擎会生成如下代码

 

    constructor() {}

对于子类

 

    constructor(...args) {

        super(...args);

    }

The details of classes

 

类名不能为eval 或者 arguments,不能有重复的类名,constructor不支持getter,setter。

classes不能像函数一样调用。

原型方法不能用作构造器:

 

    class C {

        m() {}

    }

    new C.prototype.m(); // TypeError

以下部分未完待续

 

The details of subclassing

 

Constructor calls explained via JavaScript code

 

The species pattern

 

Further reading

ES 6 class 详解 Introduction 上篇文章大致介绍了一些ES6的特性,以及如何在低版本浏览器中使用它们。本文是对class的详解。 译自Axe...

本文由9159金沙游艺场-奥门金沙游艺场-[欢迎您]发布于前端,转载请注明出处:javascript ES 6 class 详解

关键词:

Jsoup深入剖析Html中文文书档案9159金沙游艺场

Jsoup解析Html中文文档     1.解析和遍历一个HTML文档 如何解析一个HTML文档:     String html = "htmlheadtitleFirstparse/title/...

详细>>

查看和关闭selinux

centos6.4 查看和关闭selinux 安装vsftpd服务后,客户端登录ftp报错: ftpopen127.0.0.1Connectedto127.0.0.1(127.0.0.1).220(vsFTPd2.2.2)Na...

详细>>

python第三方库系列之十9159金沙游艺场

python第三方库连串之十--commands库 咱俩此次讲的是运用commands模块试行Linuxshell命令,当咱们用Python写运转脚本时,平常...

详细>>

Python 之 decorator 装饰器

Python 之 decorator 装饰器 python 在语法上对装修情势打开了支撑。 一、问题 有如下的一个函数, def sum(x, y): print "x+y:...

详细>>