ES6 Class静态方法属性与实例属性用法指南

本文通过具体示例，介绍ES6 JavaScript中Class静态方法、静态属性以及实例属性的定义与使用方式，供开发者参考。

静态方法的定义与调用

类充当了实例的原型角色，类中定义的所有方法默认会被实例继承。若在方法前添加static关键字，则该方法不会被子类实例继承，而是直接挂载在类上，这类方法被称为“静态方法”。


class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

在Foo类的classMethod方法前添加static关键字，表明该方法是静态的。调用时可直接使用类名访问（如Foo.classMethod()），而无需创建实例。若在实例上尝试调用静态方法，程序将抛出错误，提示该方法不存在。

父类定义的静态方法，子类可以继承并调用。


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

上述代码中，父类Foo包含一个静态方法，子类Bar可以直接调用该方法。此外，静态方法内部也可以通过super关键字访问父类的同名静态方法。


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

静态属性的定义与限制

静态属性

静态属性是指直接定义在Class本身的属性，即Class.propname的形式，而不是定义在实例对象（this）上的属性。


class Foo {}
Foo.prop = 1;
Foo.prop // 1

上述代码为Foo类定义了一个名为prop的静态属性，值为1。

目前ES6标准规定，Class内部只能定义静态方法，不支持直接定义静态属性。


// 以下两种写法都无效
class Foo {
  // 写法一
  prop: 2
    // 写法二
  static prop: 2
}
Foo.prop // undefined

ES7中提出了静态属性的提案，目前Babel转码器已支持该语法。

该提案对实例属性和静态属性均规定了新的声明语法。

实例属性与静态属性的新语法

（1）类的实例属性

类的实例属性可以直接通过等式写入类的定义体中。


class MyClass {
  myProp = 42;
  constructor() {
    console.log(this.myProp); // 42
  }
}

上述代码中，myProp被定义为MyClass的实例属性。在MyClass的实例上可以直接读取该属性值。

以往定义实例属性时，必须将其写在类的constructor构造函数内部。


class ReactCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

上述代码中，在constructor构造函数内定义了this.state属性。采用新的语法后，实例属性无需再写在constructor中。


class ReactCounter extends React.Component {
  state = {
    count: 0
  };
}

这种新写法使代码结构更加清晰直观。

为了提高可读性，即使实例属性已在constructor中定义，新语法也允许直接在类体中列出这些属性。


class ReactCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  state;
}

（2）类的静态属性

若要在上述实例属性写法前定义静态属性，只需在属性名前添加static关键字即可。


class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}

同样，这种新写法极大地简化了静态属性的表达过程。


// 老写法
class Foo {}
Foo.prop = 1;
// 新写法
class Foo {
  static prop = 1;
}

上述代码展示了老写法与新写法的对比。老写法中，静态属性定义在类的外部，需在类生成后额外赋值，容易遗漏且不符合代码组织原则。新写法采用显式声明（declarative）方式，语义更明确。

如需了解更多相关知识，可查看本站专题：《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》。

希望本文关于ECMAScript程序设计的内容能对大家有所帮助。

ES6 JavaScript 中 Class 静态方法与属性的定义及用法详解

静态方法的定义与调用

静态属性的定义与限制

实例属性与静态属性的新语法

实用工具推荐