箭头函数的this是根据外层（函数或者全局）作用域来决定this，箭头函数会捕捉调用父函数时候父函数的this
//eg1
var x = 10;
var demo2 = {
x : 1,
test1 : () => { console.log(this.x); },
};
demo2.test1(); // 10
上面代码的结果为什么是10，test1不是在demo2这个对象内吗？所以不应该this就指向demo2了吗？以上代码中，箭头函数中的this并不是指向aa这个对象。对象aa并不能构成一个作用域，所以再往上到达全局作用域，this就指向全局作用域。因为test1没有父函数，直接就是全局作用域。所以这里的this指向window。
//eg2
var id = '888'
var handler = {
id: '123456',
init: function() {
(()=>{
console.log(this.id)
})()// 让箭头函数自执行
},
init1: function() {
(function(){
(()=>{console.log(this.id)})()
})() // 匿名函数自执行的内部是箭头函数的自执行
},
};
handler.init()//123456
var aa = handler.init
aa() // 888
handler.init1()//888
eg2的话init创建了一个作用域。箭头函数会捕捉调用init时候init内的this。handler.init调用时候init内的this指向handler对象。var aa = handler.init; aa()这样子的话调用init是window。所以值是888。handler.init1()的值为什么是888呢？因为init1内部是个匿名函数自执行。自执行内部才是箭头函数。所以这样子看来，箭头函数的外部是个匿名函数自执行,而自执行函数的this指向window。所以init1的值为888
- 箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中；
- 不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
1
$("#desktop a img").each(function(index){
alert($(this));
alert(this);
} //这里的this就是 $("#desktop a img"). 谁调用就是谁 jquery库把this进行了包装
2
$(".myMenuItem").mouseover( () => {
console.log("$(this)",$(this))
} //这里的$(this)也是jquery对象但是指向整个react ，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。这里相当于也是回调。箭头函数本身是没有this的所以就向上找一层
匿名函数自执行，setTimeout等中的this指向全局
JavaScript 环境中内置的 setTimeout() 函数实现和下面的伪代码类似:
function setTimeout(fn,delay) { // 等待 delay 毫秒
fn(); // <-- 调用位置! 这里就是单纯的函数调用，所以指向全局
}
function Bue() {
(function() {
debugger;
console.log('this', this.init) 所以这里的this是window this.init为undefined。并不是你所想象的this指向app实例。
})()
}
Bue.prototype.init = 'wo'
var app = new Bue()
function Bue() {
console.log('this', this.init) //这里的this指向app。所以可以在Bue中直接使用Bue.prototype上的属性
}
Bue.prototype.init = 'wo'
var app = new Bue() // new的时候会把Bue的上下文换成app实例的执行一遍。所以new Bue()时候可以执行console.log
forEach 中的this
function hh () {
[].slice.call(node.childNodes).forEach(_compileNode, this); // 需要传递this
}
若想._compileNode函数中的this和函数hh的this指向一致，就需要手动给forEach传第二个参数this。
