分类： 写写代码

Node.JS 中，同一个模块多次 require 得到的是同一个对象，这意味着修改了一个模块的内部值是可以在别的引用了该模块的地方生效的。

Webpack 的打包机制也是基于引用同一个对象来实现的，故同理。

示例代码

mod.js

module.exports = test;

function test() {
   return test.data; 
}

test.add = function(data) {
    this.data.push(data);
};

test.data = [];

comA.js

const mod = require('./mod');

mod.add(1);
mod.add(2);
mod.add(3);

console.log('in comA');

index.js

const mod = require('./mod');
require('./comA');

console.log(mod());   // ==> [1, 2, 3]

JavaScript 中 this 的指向根据上下文及使用方式而有所不同。

全局上下文 Global Context

在全局上下文（不在函数体内）中总指向全局对象，如在浏览器中是 window，在 Node.js 则是 global。

函数上下文 Function Context

• 简单调用
  • 严格模式：undefined
  • 非严格模式：全局对象
  • 可用 call 或 apply 来改变 this
• 作为对象的方法：指向直接所在的对象，如 a.b.c() 中 c 的 this 指向 b，适用于普通的对象、原型链方法和 getter/setter。
• 作为构造函数，指向正在构建的对象
• 作为 DOM 事件处理函数，指向触发事件的元素（指的是外层函数，如果是多层，遵循其余规则）
• bind：用 f.bind(object) 来返回新的绑定 this 的函数，不论怎么调用，如通过对象方法调用、call 或 apply 都不会改变 this。再次 bind 也不会改变。
• 箭头函数（arrow function）：this 指向词法上下文（实际运行生成箭头函数时上下文）的 this，不会被调用方式改变，但会因生成方式而不同。

var obj = {
    bar: function() {
        var x = (() => this);
        return x;
    }
};

var fn = obj.bar();
console.log(fn() === obj); // true

var fn2 = obj.bar;
console.log(fn2()() == window); // true

（更多…）

对于下面这段 js

function async3() {
  createPromise()
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })
    .finally(() => {
        console.log('finally');
    });
}

其对应 async/await 版本是

async function async2() {
    try {
      const ret = await createPromise();
      console.log(ret);
    } catch (e) {
      console.error(e);
    } finally {
      console.log('finally');
    }
}

经 babel 转为 ES5 后，除了必要的 babel-polypill，会生成以下代码，其中 _asyncToGenerator 不会多次生成。

var async2 = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var ret;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return createPromise();

          case 3:
            ret = _context.sent;

            console.log(ret);
            _context.next = 10;
            break;

          case 7:
            _context.prev = 7;
            _context.t0 = _context['catch'](0);

            console.error(_context.t0);

          case 10:
            _context.prev = 10;

            console.log('finally');
            return _context.finish(10);

          case 13:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this, [[0, 7, 10, 13]]);
  }));

  return function async2() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

写法上直观了的，但在浏览器端，还是有些代价，生成的代码会多出不少。