Home > Article > Web Front-end > How to use class attribute in JS
Today I will teach you how to use class in JS. A class is equivalent to the prototype of an instance. All methods defined in a class will be inherited by the instance . If it is before a method, Adding the static keyword means that the method will not be inherited by the instance. Here is an example.
[javascript]view plaincopy classFoo{ staticclassMethod(){ return'hello'; } } Foo.classMethod()//'hello' varfoo=newFoo(); foo.classMethod() //TypeError:foo.classMethodisnotafunctionIn 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()) instead of 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.
[javascript]view plaincopy classFoo{ staticclassMethod(){ return'hello'; } } classBarextendsFoo{}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.
[javascript]view plaincopy classFoo{ staticclassMethod(){ return'hello'; } } classBarextendsFoo{ staticclassMethod(){ returnsuper.classMethod()+',too'; } } Bar.classMethod();静态属性[javascript]view plaincopy classFoo{} Foo.prop=1; Foo.prop//1 上面的写法为Foo类定义了一个静态属性prop。Currently, only this way of writing is feasible, because ES6 clearly stipulates that there are only static methods inside Class and no static attributes.
[javascript]view plaincopy //以下两种写法都无效 classFoo{ //写法一 prop:2 //写法二 staticprop: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 classThe instance attributes of a class can be written into the definition of the class using equations.
[javascript]view plaincopy classMyClass{ 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.
[javascript]view plaincopy classReactCounterextendsReact.Component{ constructor(props){ super(props); this.state={ count:0 }; } } 上面代码中, 构造方法constructor里面, 定义了this.state属性。 有了新的写法以后, 可以不在constructor方法里面定义。 [javascript]view plaincopy classReactCounterextendsReact.Component{ state={ count:0 }; }This way of writing is clearer than before.
[javascript]view plaincopy classReactCounterextendsReact.Component{ constructor(props){ super(props); this.state={ count:0 }; } state; }(2) Static attributes of the classThe static attributes of the class only need to be added with the static keyword in front of the instance attribute writing method above.
[javascript]view plaincopy //老写法 classFoo{} Foo.prop=1; //新写法 classFoo{ staticprop=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.
What does the JS engine look like when running
How to implement asynchronous synchronous requests in AJAX
How to use the jssplice() method in JS development
The above is the detailed content of How to use class attribute in JS. For more information, please follow other related articles on the PHP Chinese website!