js中的this大家都有基本的共識啄刹，那就是執(zhí)行上下文由境，當(dāng)前調(diào)用者刷晋。下面講述一個簡單的例子
var obj = {
val: 2,
a: function() {
console.log(this)
}
}
obj.a(); //obj對象
var x = obj.a;
x();
對于第一個打印是obj沒有疑問陪蜻，第二個為什么是window？定義x變量腥刹，其實(shí)是var x 等價(jià)于 window.x马胧，x()也就等價(jià)于window.x(),調(diào)用者是window。
這只是js中this最常見的一個案例衔峰。下面將講解this更魔性的地方佩脊。
箭頭函數(shù)也普通匿名函數(shù)的區(qū)別
比如上面的例子，我將a使用箭頭函數(shù)會有什么區(qū)別了
var obj = {
val: 2,
a: () => {
console.log(this)
}
}
obj.a();
var x = obj.a;
x();
2個都會打印window垫卤，魔性開始威彰，這里我先說一個箭頭函數(shù)的原理，在匿名函數(shù)的基礎(chǔ)上箭頭函數(shù)會綁定當(dāng)前父環(huán)境的this穴肘。
obj所在的環(huán)境是window抱冷，箭頭函數(shù)就會綁定window。下面難度升級
var haha = {
x: function () {
var obj = {
a: () => {
console.log(this)
},
b: function () {
console.log(this)
}
};
return obj;
}
};
var y = haha.x();
y.a();
y.b();
我們一步一步來看
執(zhí)行完haha.x()梢褐，當(dāng)前調(diào)用者是window,接著執(zhí)行y.a(),obj所在的環(huán)境是haha這個對象，當(dāng)前的環(huán)境是在haha這個對象中赵讯，執(zhí)行y.b()時盈咳，調(diào)用者是obj這個對象，所以分別打印的是haha和obj
再看2個例子
var obj = {
say: function () {
var f1 = () => {
console.log(this);
setTimeout(() => {
console.log(this);
})
}
f1();
}
}
obj.say()
var obj = {
say: function () {
var f1 = function () {
console.log(this);
setTimeout(() => {
console.log(this);
})
};
f1();
}
}
obj.say()
第一個例子都會打印obj边翼，分析一下鱼响，執(zhí)行obj.say時，此時箭頭函數(shù)所處的環(huán)境是obj组底，執(zhí)行完f1時丈积，this為obj定時器也是obj
第二個例子都會打印window，明明是obj調(diào)用的怎么會是window债鸡，原因就是最終f1執(zhí)行是江滨，并沒有宿主對象來調(diào)用這個f1，所有f1執(zhí)行就是window調(diào)用的f1厌均，而匿名函數(shù)又不能綁定當(dāng)前環(huán)境唬滑，所以打印的就是window
在寫js時，會經(jīng)常用到回調(diào)，可以使用箭頭函數(shù)晶密，也可以使用匿名函數(shù)擒悬，箭頭函數(shù)會綁定當(dāng)前環(huán)境的this
