严格模式下在回调函数中访问公共值的替代方法咨询

好问题！严格模式下确实会严格校验变量声明，之前你用未加var/let/const的self，在严格模式里直接触发未声明变量的错误。这里有几个靠谱的替代方案，完美适配严格模式：

1. 箭头函数（最简洁的现代方案） #

箭头函数不会绑定自己的this，它会直接继承外层作用域的this上下文，刚好解决回调里this指向混乱的问题：

function InfoClass() {
  this.local = 1; // 注意要把变量挂载到实例上，之前的var local是构造函数私有变量，外部访问不到
}
InfoClass.prototype.myFunction = function () {
  this.win.addEventListener('open', (e) => {
    // 这里的this直接指向InfoClass的实例
    console.log(this.local);
  });
};

这个方案写法最简洁，也是现在前端开发的首选，只要你的运行环境支持ES6（绝大多数现代浏览器和Node.js都支持）就可以用。

2. 提前用声明过的变量保存this（兼容旧环境） #

如果需要兼容IE11这类不支持箭头函数的旧环境，可以在回调外层把this存到一个用let/const声明的变量里，利用闭包访问：

function InfoClass() {
  this.local = 1;
}
InfoClass.prototype.myFunction = function () {
  const that = this; // 用const声明变量，严格模式下合法
  this.win.addEventListener('open', function(e) {
    console.log(that.local); // 通过闭包访问外层的that
  });
};

这里的that可以换成你习惯的名字（比如self），但一定要记得用let或const声明，避免严格模式报错。

3. 用bind()绑定回调的this #

你也可以直接通过bind()方法把回调函数的this绑定到InfoClass的实例上：

function InfoClass() {
  this.local = 1;
}
InfoClass.prototype.myFunction = function () {
  function handleOpen(e) {
    console.log(this.local); // 这里的this已经被绑定到实例
  }
  this.win.addEventListener('open', handleOpen.bind(this));
};

bind()会返回一个新函数，这个函数的this永远指向你传入的参数，不管它被在哪里调用，非常适合需要固定this的场景。

另外要提醒你：原来代码里的var local = 1是构造函数的局部变量，并不是实例的属性，就算用self也访问不到self.local，一定要改成this.local = 1，把变量挂载到实例上，才能在原型方法的回调里正常访问哦！

内容的提问来源于stack exchange，提问作者whitebear