一呜魄、理解什么是this
1. this是使用call()方法調(diào)用函數(shù)傳遞的第一個(gè)參數(shù)师倔，它可以在函數(shù)調(diào)用時(shí)修改构韵。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
obj.fun1() //xmf 第一種調(diào)用方法
obj.fun1.call(obj) //第二種調(diào)用方法，第一種方法是第二種方法的語(yǔ)法糖。將obj賦予fun1()函數(shù)的this
2. 也可以通過call()自定義this的值疲恢。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
obj.fun1() //xmf
obj.fun1.call({name:'123'}) //123
二凶朗、this的不同指向
1. 普通函數(shù)中this的使用
規(guī)則：?jiǎn)为?dú)在使用函數(shù)或者是在函數(shù)外調(diào)用this，都指向 window显拳。
console.log(this) //window
function fun1(name){
console.log(name) //xmf
console.log(this) //window
}
fun1('xmf'); // 相當(dāng)于 window.fun1(); 所以是this指向window棚愤，請(qǐng)看實(shí)例2
2. 使用對(duì)象調(diào)用函數(shù)
規(guī)則：誰(shuí)調(diào)用了函數(shù)，當(dāng)前函數(shù)內(nèi)的this就指向誰(shuí)杂数。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
//由于是obj調(diào)用了fun1()宛畦，所以當(dāng)前函數(shù)的this就是obj耍休，所以打印xmf
obj.fun1(); //xmf
3. 構(gòu)造函數(shù)中this
規(guī)則：構(gòu)造函數(shù)在new之后都會(huì)返回一個(gè)對(duì)象，這個(gè)對(duì)象就是this羊精。
function people(){
this.name = 'xmf'
}
let obj = new people();
console.log(obj.name) //xmf
5. 箭頭函數(shù)的this執(zhí)行
規(guī)則：箭頭函數(shù)的this跟 外層this保持一致
let obj ={
xx: this,
name:'xmf',
fun1:function(){
console.log('fun1',this)
console.log('xx',this.xx) //xx window
},
fun2: () => {
console.log('fun2',this); //注意這里有人誤認(rèn)為外層的this是obj。這里我用xx屬性證明了對(duì)象里面的this是window （對(duì)象屬性的this 和 對(duì)象方法中的this是不同的）
},
}
obj.fun1(); //obj
obj.fun2(); //window
6. setTimeout()和setInterval()函數(shù)的調(diào)用
規(guī)則：定時(shí)器中this默認(rèn)指向的是window
let obj ={
name:'xmf',
fun1:function(){
setTimeout( function(){
console.log('fun1',this) //普通方法定時(shí)器喧锦，相當(dāng)于window.setTimeout(); 所以this指向window
},1000)
},
fun2:function(){
console.log('fun2外層',this)
setTimeout( () => {
console.log('fun2內(nèi)層',this) //箭頭函數(shù)寫定時(shí)器，與外層的this一致燃少。
},1000)
}
}
obj.fun1();
obj.fun2();
//fun1 window
//fun2外層 obj
//fun2內(nèi)層 obj
三、call()阵具、bind() 碍遍、apply() 的區(qū)別
相同點(diǎn)： 三者都可以改變
this的指向阳液。
先舉個(gè)例子怕敬，看看三個(gè)方法是如何調(diào)用的。
var a = {
name : "小王",
say : function() {
alert(this.name);
}
}
var b = {
name : "小紅",
}
a.say(); //小王
b.say.call(b); // 小紅
b.say.bind(b)(); //小紅 帘皿，注意bind返回的是一個(gè)方法东跪，需要加'()'調(diào)用
b.say.apply(b); //小紅
從這個(gè)例子，我們可以看到call()與apply()相似鹰溜，都是直接運(yùn)行虽填。而bind()是返回一個(gè)新的方法，如果要調(diào)用曹动，需要后面加 '()'斋日。下面再看看call()和apply()的區(qū)別。
var a = {
name : "小王",
say : function(age,sex) {
alert(‘姓名=’+this.name+" 年齡="+age+" 性別=",sex);
}
}
var b = {
name : "小紅",
}
b.say.call(b,"18","男");
b.say.bind(b,"18","男")();
b.say.apply(b,["18","男"]);
可以看到所有方法第一個(gè)參數(shù)都是給this的墓陈；call()和bind()后面的參數(shù)都是與say方法中是一一對(duì)應(yīng)桑驱。
apply()后面是一個(gè)集合竭恬，集合與say方法中是一一對(duì)應(yīng)跛蛋。這就是他們的區(qū)別熬的。
