Yutt's Blog

ES7 新语法

javascript
2018/01/31 Share

装饰器

Object.definePropert

在了解装饰器之前，先要熟悉Object.defineProperty，该方法可以用来定义对象中Porp的属性。

1
Object.definePropery(object, prop, descriptor)

该方法接受三个参数：

  • object 对象名；
  • prop 属性名；
  • descriptor 属性描述符。

Example:

1
2
3
4
5
6
7
8
var someOne = { };
Object.defineProperty(someOne, "name", {
    value:"coverguo" , //由于设定了writable属性为false 导致这个量不可以修改
    writable: false 
});  
console.log(someOne.name); // 输出 coverguo
someOne.name = "linkzhu";
console.log(someOne.name); // 输出coverguo

descriptor参数可以取以下值：

  • value:属性的值
  • writable:如果为false，属性的值就不能被重写,只能为只读了
  • configurable:总开关，一旦为false，就不能再设置他的（value，writable，configurable）
  • enumerable:是否能在for…in循环中遍历出来或在Object.keys中列举出来。
  • get: 自定义取值时触发
  • set: 自定义在赋值时促发的函数

decorator语法

decorator接受的参数与Object.defineProperty一致.
Example: 定义一个只读的装饰器

1
2
3
4
function readonly(target, key, descriptor) {
  descriptor.writable = false
  return descriptor;
}

使用方式:

1
2
3
4
5
6
7
8
9
class Dog {
  @readonly
  bark () {
    return 'wang!wang!'
  }
}
let dog = new Dog()
dog.bark = 'bark!bark!'
// Cannot assign to read only property 'bark' of [object Object]

作用在类上的decorator

1
2
3
4
5
6
7
8
9
10
// 这里的 `target` 是类本身
function doge (target) {
  target.isDoge = true
}

@doge
class Dog {}

console.log(Dog.isDoge)
// true

decorator 也可以是 factory function
如果我们想对不同的目标对象应用同一个 decorator，但同时又需要有一些差别，怎么办？很简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function doge (isDoge) {
  return function(target) {
    target.isDoge = isDoge
  }
}

@doge(true)
class Dog {}

console.log(Dog.isDoge)
// true

@doge(false)
class Human {}
console.log(Human.isDoge)
// false

用途

如果想对一个类或者一个方法附加新的机制，又不想破坏其原本的结构（利于复用），该新语法值得一用。
react 高阶组件：

  • react-redux connect；
  • redux-form。
CATALOG
  1. 1. 装饰器
    1. 1.1. Object.definePropert
    2. 1.2. decorator语法
    3. 1.3. 作用在类上的decorator
    4. 1.4. 用途
Archive Tag
Total : 25
2018
理论 English java android web javascript git js leetCode react-native react redux