Does class in es6 have static attributes?

Class in es6 has no static attributes. Static attributes are attributes of the class itself, that is, attributes directly defined inside the class (Class.propname) and do not need to be instantiated; however, ES6 stipulates that there are only static methods inside Class and no static attributes.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

In ES6, class (class) was introduced as a template for objects, and classes can be defined through the class keyword.

The essence of class is function.

It can be regarded as a syntax sugar that makes the writing of object prototypes clearer and more like the syntax of object-oriented programming.

ES6 Class static methods, properties and instance properties

The class is equivalent to the prototype of the instance. All methods defined in the class will be Instance inheritance. If the static keyword is added before a method, it means that the method will not be inherited by the instance, but will be called directly through the class. This is called a "static method".

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

In the above code, there is the static keyword before the classMethod method of class Foo, indicating that the method is a static method and can be called directly on class Foo (Foo.classMethod()), not on class Foo Called on the instance. If a static method is called on an instance, an error is thrown indicating that the method does not exist.
Static methods of parent classes can be inherited by subclasses.

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

In the above code, the parent class Foo has a static method, and the subclass Bar can call this method.

Static methods can also be called from the super object.

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

Static properties

Static properties refer to the properties of the Class itself, namely Class.propname, rather than the properties defined on the instance object (this).

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

The above writing method defines a static property prop for the Foo class.

Currently, only this way of writing is feasible, because ES6 clearly stipulates that there are only static methods inside Class and no static attributes.

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

ES7 has a proposal for static properties, currently supported by the Babel transcoder.

This proposal stipulates new writing methods for both instance attributes and static attributes.

(1) Instance attributes of a class

The instance attributes of a class can be written into the definition of the class using equations.

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

In the above code, myProp is the instance attribute of MyClass. On instances of MyClass, this property can be read.
Previously, when we defined instance attributes, we could only write them in the constructor method of the class.

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

In the above code, the this.state attribute is defined in the constructor.
With the new way of writing, you don’t need to define it in the constructor method.

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

This way of writing is clearer than before.

For the purpose of readability, the new writing method allows direct listing of instance properties that have been defined in the constructor.

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

(2) Static attributes of the class

The static attributes of the class only need to be added with the static keyword in front of the instance attribute writing method above.

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

Similarly, this new writing method greatly facilitates the expression of static attributes.

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

In the above code, the static properties of the old way of writing are defined outside the class. After the entire class is generated, static attributes are generated. This makes it easy to ignore this static attribute, and does not comply with the code organization principles that related code should be put together. In addition, the new way of writing is explicit declaration (declarative) instead of assignment processing, which has better semantics.

The above is the detailed content of Does class in es6 have static attributes?. For more information, please follow other related articles on the PHP Chinese website!