Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use class static methods in javascript". In daily operation, I believe many people have doubts about how to use class static methods in javascript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use class static methods in javascript". Next, please follow the editor to study!

The class is equivalent to the prototype of the instance, and all methods defined in the class are inherited by the instance. If you add the static keyword 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, the classMethod method of the Foo class is preceded by the static keyword, indicating that the method is a static method that can be called directly on the Foo class (Foo.classMethod ()) instead of on an instance of the Foo class. If a static method is called on an instance, an error is thrown indicating that the method does not exist.

The static method of the parent class, which can be inherited by the child class.

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 that can be called by the subclass Bar.

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 attribute

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

Class Foo {} Foo.prop = 1scape Foo.prop / / 1

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

Currently, this is the only way to write it, because ES6 makes it clear that there are only static methods and no static attributes within Class.

/ / the following two writing methods are invalid class Foo {/ / Writing method I prop: 2 / / Writing method II static prop: 2} Foo.prop / / undefined

ES7 has a proposal for static attributes, which is currently supported by Babel transcoders.

This proposal provides a new way to write both instance properties and static properties.

(1) instance properties of the class

The instance properties of a class can be written into the definition of the class using an equation.

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

In the above code, myProp is the instance property of MyClass. On an instance of MyClass, you can read this property.

Previously, we defined instance properties, which could only be written 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 property is defined in the constructor constructor.

Once you have a new way to write it, you can not define it in the constructor method.

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

This way of writing is clearer than before.

For readability purposes, the new method allows you to list instance properties that are already defined in constructor.

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

(2) static properties of the class

The static property of the class only needs to be preceded by the static keyword in front of the instance property above.

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

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

/ / the old writing method class Foo {} Foo.prop = 1 leading class Foo {static prop = 1;} at this point, the study on "how to use the class static method in javascript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.