About Class: class of static methods and instance properties of ES6 JavaScript.

1, what is called a static method?

　1.1, corresponding to the class prototype example, all methods defined in the class, instance will be inherited. If the previous method, add the Static keyword, it means that the method is not inherited, but directly through the class to call, this is called "static method."

　1.2, we can conduct a deeper understanding from the code.

The following code, the method Sea front classMethod class are static keyword, that the method is a static method, can call (Sea.classMethod ()) based directly on the Sea, instead of calling the static method on an instance of class Sea It will throw an error, indicating that the method does not exist.

Static methods of the parent class can be inherited by subclasses.　

1 class Sea {
2           static  classMethod(){
3                    return 'hello'    
4          }        
5 }    
6 Sea.classMethod()   //'hello'
7 var foo =new Foo();
8 foo.classMethod()
9               // TypeError: foo.classMethod is not a function

The following code. Sea parent class has a static method, the subclass Ocean can call this method.

Static method also can be called from the super object.

1 class Sea{
2            static classMethod(){
3                           return 'hello'
4                 }
5 }        
6 class Ocean extends Sea{}    
7  Ocean.clsaaMethod();  //'hello'

1.3, the following is to use the entire static method (complete can be directly used)

 1 class Sea{
 2      static  classMethod(){
 3            return  'hello'
 4        }
 5 }        
 6 class Ocean extends  Sea{
 7            static  classMethod(){
 8 return  super.clsassMethod()+',too'
 9        }  
10 }
11  Ocean.classMethod();

2, What is static properties?

　　2.1 Static Class attribute refers to the attribute itself, i.e. Class.propname, rather than defining instance property on the object (this) a.

2.2, we can conduct a deeper understanding from the code.

　　 The following wording for the Sea defines a static prop, at present, only such an approach is feasible because ES6 clear that internal Class only static methods, no static properties.

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

2.3, ES7 has proposed a static property, currently Babel transcoder support. The proposal for instance properties and static properties, provide for a new wording.
　　　2.3.1, the class instance attributes of the
　　　 class instance attributes may be by the equation, defined in the class is written.　

1  //   The following are two way invalid 
2  class Sea {
 . 3      //   writing a 
. 4      prop: 2 
. 5          //   writing two 
. 6      static prop: 2 
. 7  }
 . 8 Sea.prop // undefined

　　2.4, the following code, is an example of the properties of MyClass myProp. In the instance of MyClass, you can read this property. Previously, we define an instance property, which can only write in class from structor method.

1 calss MyClass{
2              myProp=42;
3              constructor(){
4                              console.log(this.myProp);              
5           }       
6 }

2.5, the following code, which the constructor constructor defined this.state properties. With the new wording in the future, there may not be defined constructor method.

1 class ReactCounter extends React.Component {
2     constructor(props) {
3         super(props);
4         this.state = {
5             count: 0
6         };
7     }
8 }

The wording clearer than before.

For purposes of readability, for example those properties which has been defined in the constructor, allowing direct writing new lists.

1 class ReactCounter extends React.Component {
2     state = {
3         count: 0
4     };
5 }

　2.6, the following static properties even if the entire (complete may be directly used)

1 class ReactCounter extends React.Component {
2     constructor(props) {
3         super(props);
4         this.state = {
5             count: 0
6         };
7     }
8     state;
9 }

3, the static properties of the class

　3.1 static properties, as long as the class instance attributes EDITORIAL above, plus the static keyword on it.　

1 class MyClass {
2 static myStaticProp = 42;
3 constructor() {
4 console.log(MyClass.myProp); // 42
5         }
6 }

Similarly, the wording of this greatly facilitates the expression of static properties.

1  //   old wording 
2  class Foo {}
 . 3 Foo.prop = 1 ;
 . 4  //   new wording 
. 5  class Foo {
 . 6      static prop = 1 ;
 . 7 }

In the above code, external static attribute definitions written in the old class. After the entire class generation, and then generates a static properties. This makes it easy to ignore the static properties, the code does not comply with the relevant principles of the code should be placed on the organization together. In addition, the new wording is explicitly declared (declarative), rather than the assignment processing, semantic better.

About Class: class of static methods and instance properties of ES6 JavaScript.

Guess you like