How to use class attribute in JS-JS Tutorial-php.cn

How to use class attribute in JS

php中世界最好的语言

Release： 2017-12-04 14:36:52

Original

3925 people have browsed it

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.classMethodisnotafunction

Copy after login

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()) 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.

Static methods of parent classes can be inherited by subclasses.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{}

Copy after login

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。

Copy after login

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
}

Copy after login

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.

[javascript]view plaincopy
classMyClass{
myProp=42;
constructor(){
console.log(this.myProp);//42
}
}

Copy after login

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 properties, we could only write them in the constructor method of the class.

[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
};
}

Copy after login

This way of writing is clearer than before.

For readability purposes, the new notation allows direct listing of instance properties that have been defined in the constructor.

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
state;
}

Copy after login

(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.

[javascript]view plaincopy
//老写法
classFoo{}
Foo.prop=1;
//新写法
classFoo{
staticprop=1;
}

Copy after login

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.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!