为何无需ES6箭头函数也能保留this的词法值？附Plunkr示例

咱们先拆解代码里的核心逻辑，搞清楚为什么你看到普通ES5函数也能拿到this.data：

1. exec函数的this由调用方式决定 #

当你在$scope.init里直接调用exec()时，在浏览器非严格模式下，exec内部的this默认指向全局window对象。这时候执行this.data = "234"，本质是给window对象添加了一个data属性。

2. 普通ES5函数es5的this绑定规则 #

你代码里的es5()是直接调用的普通函数，这种调用场景下：

• 非严格模式：this默认绑定到全局window对象
• 严格模式：this会是undefined

所以es5里的this也是window，自然能访问到刚才给window加的data属性——这不是“保留了词法this”，只是两个函数的this恰好都指向同一个全局对象的巧合而已。

3. 箭头函数es6能访问的本质 #

箭头函数的this是词法绑定的，它会直接继承外层作用域（也就是exec函数）的this值。不管怎么调用es6，它的this永远和exec的this保持一致，这才是真正的“保留词法this”。

验证差异的小测试 #

如果把exec的调用方式改成绑定到$scope，比如：

$scope.init = function() {
  exec.call(this); // 把exec的this绑定到当前$scope
}

这时候你会发现：

• es5()里的console.log(this.data)会输出undefined（因为es5的this还是window，而window上没有data属性）
• 箭头函数es6()依然能输出"234"（因为它继承了exec的this，也就是$scope）

总结 #

你当前看到的普通ES5函数能访问this.data是个巧合——因为exec和es5的this都默认绑定到了全局window对象。真正能稳定保留词法this的只有箭头函数（或者传统的var self = this、bind方法），普通函数的this完全由调用方式决定。

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