本文为译文，原文为 A different way of understanding this in JavaScript
原文地址：http://2ality.com/2017/12/alternate-this.html
理解javaScript中this的另一种方法
在这篇博文中，我将通过不同以往的方法来解释javaScript中的this：假设箭头函数是真正的函数，而普通函数是方法的特殊构造。我认为这样会使得this更加容易理解－－－来试一试吧
1. 两种类型的函数
在这篇博文里，我们关注两种不同的函数：
普通函数：function () { }
箭头函数： （）=> { }
1.1 普通函数
通过以下的方式创建一个普通的函数：
function add(x, y) { return x + y;
}每个普通函数在被调用时都填充了一个隐式参数this，换句话说，下面的两个表达式是等价的（在严格模式下）：
add(3,5); add(underfined, 3, 5);
如果你嵌套不同函数，this是隐式的
function outer（）{function inner（） {console.log(this); // underfined}console.log(this); //outer；inner（）；
}
outer.call(‘outer‘);内部的inner（），this并没有指向outer的this，因为inner（）拥有自己的this。
如果this是一个显示参数，这段代码将变成如下所示：
function outer（_this）{function inner（_this） {console.log(_this); // underfined}console.log(_this); //outer；inner（underfined）；
}
outer.call(‘outer);请注意inner()对outer中的this的影响就像变量在嵌套作用域中所启到的作用一样：
const _this = outer;
console.log(_this); //‘outer’{const _this = undefined;
console.log(_this); // undefined}由于普通函数总是存在着一个隐式参数this，因此‘方法’这个名字应该更适合它们。
1.2箭头函数
如下创建一个箭头函数（我使用了一个代码块以至于它更像一个函数声明)
const add = （x, y）{const inner = () = > {return x+y;
}
}如果你在一个普通函数里内部嵌套一个箭头函数，this 是不会受到影响的
function outer（）{const inner = () => {console.log(this); // outer}console.log(this); //outer；inner（）；
}
outer.call(‘outer);由于箭头函数的这种表现，我偶尔也把它称之为‘真正的函数’。
比起普通函数，箭头函数与大多数的编程语言中的函数更加相似。
请注意箭头函数的中的this不会因为使用了.call()而受影响的，或者换句话说，它在被创建的时候就已经被固定在箭头函数所包含的作用域里了，例如：
function ordinary（） {const arrow = （）=> this;console.log(arrow.call(‘goodbye’)); //hello}
Ordinary.call(‘hello’);1.3做为方法的普通函数
如果一个普通函数是一个对象的属性值，那么这个普通函数就变成了一个方法。
const obj = {prop: function () {}
}访问一个对象的属性的方法之一是通过.点操作符，这个操作符有两种不同模式：
获取和设置属性：obj.prop
调用方法：obj.prop(x, y)
第二个等价于：
obj.prop.call(this, x, y)
可以看出，当普通函数被调用时this再一次地被填充进去了。
JavaScript里有特殊的，更便利的语法来定义方法：
const obj = {
prop() {}
}2. 公共的缺陷
让我们透过刚刚所学的知识来看一看一些公共的缺陷。
2.1缺陷：访问回调中的this（Promises）
一旦异步函数cleanupAsync（）执行完毕，请思考以下基于Promise的代码，在该代码中我们打印了“Done”。
// Inside a class or an object literal:PerformCleanup() {
CleanupAsync().then(function (){
This.logStatus(‘Done’); // (A)})
}问题在于this.LogStatus()在执行到A行时就报错了，因为这时的this没有指向我们所预想的那个this。PerformCleanup（）this受到了回调函数中的this的影响。换句话说：当我们想要使用一个箭头函数的时候使用了一个普通函数，如果我们改成下面的写法，那问题就解决了：
// Inside a class or an object literal:PerformCleanup() {
CleanupAsync().then( () => {
This.logStatus(‘Done’);
})
}2.2缺陷：访问回调中的this（.map）
类似的，下面的代码也将会在A行中失效，因为回调又影响到了prefixName方法中的this。
// Inside a class or an object literal:prefixNames(names) { return names.map(function (name) { return this.company + ': ' + name; // (A)
});
}我们再一次使用箭头函数来修改一下：
// Inside a class or an object literal:prefixNames(names) { return names.map( name => this.company + ': ' + name);
}2.3缺陷：使用方法作为回调
下面是一个UI组件的类
class UiComponent { constructor(name) { this.name = name; const button = document.getElementById('myButton');
button.addEventListener('click', this.handleClick); // (A)
}
handleClick() { console.log('Clicked '+this.name); // (B)
}
}在A行中，UiComponent 注册了一个click事件处理程序。如果这个处理程序被触发，你会得到一个错误提示：
TypeError: Cannot read property 'name' of undefined
为什么呢？在A行，我们使用了一个正常的点操作符，而不是一个特殊的方法来调用这个点操作符，因此，存储在handleClick中的函数变成了处理程序，也就是说，大致发生了以下这些事情：
const handler = this.handleClick; handler(); //相当于: handler.call(undefined);
结果，this.name就在B行处报错了。
那我们该怎么修正它呢？问题在于，调用方法的点运算符不仅仅是先读取属性然后调用结果的组合。它做得更多。因此，当我们抽出一个方法时，我们需要自己提供缺失的部分，并通过函数方法.bind（）（line A）为this填充一个固定值：
class UiComponent { constructor(name) { this.name = name; const button = document.getElementById('myButton');
button.addEventListener( 'click', this.handleClick.bind(this)); // (A)
}
handleClick() { console.log('Clicked '+this.name);
}
}现在，this是固定的了，并且不会因为使用了正常的函数来调用而受到影响了。
function returnThis() { return this;
}const bound = returnThis.bind('hello');
bound(); // 'hello'bound.call(undefined); // 'hello'3. 保持安全的规则
避免问题的最简单方法是避免使用普通函数，并且始终使用方法定义或箭头函数。
然而，我更倾向于函数声明的语法。函数提升在有些时候也是有用的。如果你不在里面引用this，你可以安全地使用它们。这里有一个ESLint规则，可以帮助你。
31.不要把this当做参数来使用
一些API通过this来提供参数信息。我不喜欢那样，因为它阻止了你使用箭头函数，并违背了最初提到的简单经验法则。
来看下面的一个例子：beforeEach（）函数将API对象通过this传递给它的回调函数。
beforeEach(function () { this.addMatchers({ // access API object
toBeInRange: function (start, end) {
···
}
});
});重写这个函数很容易：
beforeEach(api => {
api.addMatchers({
toBeInRange(start, end) {
···
}
});
});4. 进一步阅读
博文 “JavaScript’s this: how it works, where it can trip you up” [深入理解 this]
文章 ［探索ES6］系列中的 “Callable entities in ECMAScript 6”
作者：生物股长_pld
链接：https://www.jianshu.com/p/40238ef1b721