Is the modifier a feature of es6 or es7?

Modifier is an es7 feature. Modifier is a class-related syntax introduced by ES7. It is used to annotate or modify classes and class methods. It relies on the "Object.defineProperty" method of ES5 and is written as "@function name"; it can be injected into classes, Methods and attribute parameters are used to extend the functions of classes, attributes, methods, and parameters.

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

What is a decorator?

Decorator is a syntax of ES7. It is a class-related syntax that is used to annotate or modify classes and classes. Methods.

Its appearance can solve two problems:

• Shared methods between different classes

• Compile-time comparison of classes and methods To change the behavior of

modifier, a wrapper function is written as @function name. It can be placed before the definition of classes and class methods, and can be used to provide additional functionality to classes, properties, or functions.

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

A total of four decorators are used above, one is used in the class itself, and the other three are used in the class method.

Decorator (Decorator) is not a new concept. Other languages ​​such as Java and Python have been around for a long time. The decorator (Decorator) in ES7 draws on the writing methods of other languages. , but relies on the ES5 Object.defineProperty method.

Class modification

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

@testable is a decorator, which modifies the behavior of the MyTestableClass class and adds the static attribute isTestable to it. The parameter target of the testable function is the MyTestableClass class itself.

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

In other words, the decorator is a function that processes a class. The first parameter of the decorator function is the target class to be decorated.

If you want to add multiple parameters, you can encapsulate a layer of functions outside the decorator.

function testable(name) {
    return function(target) {
      target.name = name;
    }
  }

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf

The above example is to add a static attribute to the class.
If you want to add instance attributes, you can operate through the Prototype object of the target class.

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// main.js
import { mixins } from './mixins'

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // 'foo'

In actual development, when react is used in combination with the Redux library, it is often necessary to write it as follows.

class MyreactComponent extends React.Component {};

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

With the decorator, you can rewrite the above code.

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

Note that the decorator changes the behavior of the class. This happens when the code is compiled, not at runtime. This means that decorators can run code during compilation. In other words, the decorator is essentially a function that is executed at compile time.

Method modification

class Person {
  // 用来装饰”类“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

The decorator function readonly can accept a total of three parameters.

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

• The first parameter of the decorator is the prototype object of the class. The above example is Person.prototype. The original intention of the decorator is to "decorate" the instance of the class, but the instance has not yet been generated at this time. So you can only decorate the prototype (this is different from class decoration, in which case the target parameter refers to the class itself)
• The second parameter is the name of the attribute to be decorated
• The third The first parameter is the description object of the attribute

The decorator also has the function of annotation. For example, we can see at a glance that the name method above is read-only.

In addition to comments, decorators can also be used for type checking. So, for classes, this feature is quite useful. In the long term, it will be an important tool for static analysis of JavaScript code. It is supported as an experimental feature in TypeScript.

Why decorators cannot be used for functions

Decorators can only be used for classes and class methods, not functions, because there is function promotion.

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {}

The above code intends that counter is equal to 1 after execution, but the actual result is that counter is equal to 0. Because of function promotion, the actual executed code is as follows.

@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};

In short, due to the existence of function promotion, decorators cannot be used for functions. Classes will not be promoted, so there is no problem in this regard.

core-decorators.js

[core-decorators.js]() is a third-party module that provides several common decorators.

• @autobind: Makes the this object in the method bound to the original object
• @readonly: Makes the property or method unwritable.
• @override: Check whether the method of the subclass correctly overrides the method of the same name of the parent class. If it is incorrect, an error will be reported.
• @deprecate (alias @deprecated): Displays a warning on the console indicating that the method will be deprecated.

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

The above is the detailed content of Is the modifier a feature of es6 or es7?. For more information, please follow other related articles on the PHP Chinese website!