解析ES2015中的静态方法

ES2015引入的静态方法(static关键字),和我之前文章中解析的classconstructor一样,都只是一种语法糖,本质上,与ES5中的函数没有什么区别。

注意,ES2015并没有对静态属性的定义。

从ES2015开始,我们可以使用static关键字定义一个类的静态方法:

class Foo {
    static init(options) {
        Object.assign(this.prototype, options);
    }
}

Foo.init({version: 'v1.0'});

var foo = new Foo();
console.log(foo.version); // v1.0
foo.init(); // Uncaught TypeError: foo.init is not a function

从上面的示例代码中我们发现,ES2015中的静态方式只能被类名访问,而无法被实例对象访问。此外,我们还得知晓在上面静态方法init中,this指向的是Foo类本身,而this.prototype才是指向Foo类的实例化对象。

OK!接下来,我们以ES5环境下对ES2015的静态方法进行解析。

我们可以很容易地将上面的代码转换为以下ES5的代码:

var Foo = function () {

};

Foo.init = function (options) {
    Object.assign(this.prototype, options);
};

Foo.init({version: 'v1.0'});

var foo = new Foo();
console.log(foo.version); // v1.0
foo.init(); // Uncaught TypeError: foo.init is not a function

这两者变化极小,所以就算不使用ES2015的static关键字,我们也可以很轻松地定义静态方法。

你可能感兴趣的:(JavaScript)