es6 语法

[shibiaoz]

es6 生成器 & 迭代器

generators next yield [Symbol.iterator](){} for(var key in obj){} for(var key of iterable){} 自定义迭代类

[shibiaoz]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators http://www.infoq.com/cn/articles/es6-in-depth-generators http://es6.ruanyifeng.com/#docs/generator http://www.infoq.com/cn/es6-in-depth/

[shibiaoz]

JS装饰器（Decorator）

用来修改类的行为，包括类，类的成员属性，静态属性，成员方法。注意：装饰器只能修饰类的行为，不能直接用于修改（非类中的）函数的行为，想想为什么呢？

注意，修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数

 var readonly = require('../xxx);
@readonly
function test() {
}
实际会有函数会有声明提升，结果会如下
var readonly;
@readonly
function test() {
}
readonly =  require('../xxx);
所以装饰器不能直接用于修改函数

装饰器定义和使用

装饰器 是一个普通的函数带有三个特殊的参数，调用的时候在需要被修改的目标前面使用 @functionName 即可 decoratorExpression(target,name, desciptor)

• target 代表类本身，注意这是类的 prototype
• name 被修饰的属性名字或者函数的方法名
• desciptor 是该属性的描述对象

// descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };

demo

根据网上的参照改写一个 demo 主要包括对类行为的修改和对类方法的修改

function decorateArmour(target, key, descriptor) {
  console.log(target);
  console.log(key);
  console.log(descriptor);
  const method = descriptor.value;
  let moreDef = 100;
  let ret;
  descriptor.value = (...args) => {
    args[0] += moreDef;
    ret = method.apply(target, args);
    return ret;
  };
  return descriptor;
}

function classDecorator(p1, p2, p3) {
  return (target, key, descriptor) => {
    target.prototype.classNameString = "aaaaa";
  };
}
@classDecorator(1, 2, 3)
class Man {
  constructor(def = 2, atk = 3, hp = 3) {
    this.init(def, atk, hp);
  }

  @decorateArmour
  init(def, atk, hp) {
    this.def = def; // 防御值
    this.atk = atk; // 攻击力
    this.hp = hp; // 血量
  }
  toString() {
    return `防御力:${this.def},攻击力:${this.atk},血量:${
      this.hp
    }, classNameString:${this.classNameString}`;
  }
}

var tony = new Man();

console.log(`当前状态 ===> ${tony}`);

运行输出为 当前状态 ===> 防御力:102,攻击力:3,血量:3, classNameString:aaaaa

运行

上面的 demo 是无法直接运行的，需要进行 babel 的编译

npm install -save-dev

    "babel-cli": "^6.26.0",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",

.babelrc
{
  "plugins": ["transform-decorators-legacy", "transform-es2015-classes"]
}

run
./node_modules/.bin/babel --plugins transform-decorators-legacy,transform-es2015-classes  src/other-demos/decorator.js > aa.js