What is the difference between es6 static properties and instance properties?

Difference: 1. Static properties are properties of the class itself and can only be called in the class itself, while instance properties are properties of instance objects; 2. Instance objects cannot call static properties, but classes can call instance properties; 3. There is only one declaration method for static attributes, the syntax is "class name. Attribute name = value", while there are multiple declaration methods for instance attributes, which are defined in the example class with "attribute name = value".

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

Static means it will not be inherited by the instance. It belongs to the class itself. It cannot be inherited by the instance and cannot be called, just like the scope.

• Static properties: They are properties of the class itself. They can only be called in the class itself. Static properties cannot be called by instance objects. They can only be called by the class itself. Of course, subclasses can also call them. Static attributes of the parent class;

• Instance attributes: It is the attributes of the instance. The instance attributes that the instance object can call. Remember that the instance cannot call the static attributes of the class, but the class can call Instance properties;

Declare static properties:

It is the same as adding properties to a normal Object, object.a = value; (The only method currently); Some people have proposed adding the static keyword inside the class, but it has not been implemented yet

class F{};
F.b="父类的静态属性";//给F类加静态方法

Declare a static method: add the static keyword before the method

class Foo {
  static bar () {//静态方法  静态方法中的this指向类本身而不是实例
    this.baz();
  }
  static baz () {//静态方法
    console.log('hello');
  }
}
 
Foo.bar() // hello
new Foo().bar();//实例调用不了，会报错

Declare instance attributes:

1, defined in the class

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

  }
}
 
//上面代码中，myProp就是MyClass的实例属性。在MyClass的实例上，可以读取这个属性。

2, defined in the constructor (classic writing in react)

class ReactCounter extends React.Component {
  constructor(props) {
    super(props);//可以让子类继承
    this.state = {
      count: 0
    };
  }
}
 
//等价于
class ReactCounter extends React.Component {
  state = {
    count: 0
  };
}

Summary of the difference between static properties and instance properties:

• Static properties are properties of the class itself and can only be called in the class itself; while instance properties are properties of the instance object. Can be called by instance objects.

• Instance objects cannot call static properties, they can only be called by the class itself; and classes can call instance properties.

• Static properties have only one declaration method, while instance properties have multiple declaration methods.
  

• #Instance attributes are defined on the instance. They can be defined on this inside the constructor, or on the instance after the constructor is instantiated.

  Static properties, properties defined above the constructor. Can be accessed directly through the constructor.

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the difference between es6 static properties and instance properties?. For more information, please follow other related articles on the PHP Chinese website!