this的在什么時(shí)候確定下來(lái)的
- this和作用域不一樣,作用域是聲明的時(shí)候就定下來(lái)了,this是在調(diào)用的時(shí)候才確定下來(lái)
this的綁定方式有5種
-
1.默認(rèn)綁定
默認(rèn)綁定一般發(fā)生在回調(diào)函數(shù),函數(shù)直接調(diào)用;
function test() {
console.log(this); //window 或 嚴(yán)格模式下是undefined
}
setTimeout(function () {
console.log(this);
//window setTimeout比較奇怪,默認(rèn)綁定嚴(yán)格模式下竟然不是undefined
});
arr.forEach(function(){
console.log(this);//window 或嚴(yán)格模式下是undefined
});
-
2.隱式綁定
這個(gè)通俗點(diǎn)用一句話概括就是誰(shuí)調(diào)用就是指向誰(shuí)
const obj = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
obj.getName();
還有一些情況,鏈?zhǔn)秸{(diào)用,看最后那個(gè)
const obj1 = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
const obj2 = {
name:'sam',
friend:obj1
};
const obj3 = {
name: 'jam',
friend:obj2
};
obj3.friend.friend.getName() //obj joy本質(zhì)上還是obj1調(diào)用的
const obj1 = {
name:'joy',
getName(){
console.log(this);
console.log(this.name);
}
};
const obj2 = {
name:'sam',
getName:obj1.getName
};
obj2.getName() //obj2 sam
-
3.顯示綁定call,apply,bind
const obj1 = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
const obj2 = {
name:'sam'
};
obj1.getName.call(obj2); //obj2 sam
obj1.getName.apply(obj2); //obj2 sam
const fn = obj1.getName.bind(obj2);
fn();//obj2 sam
call和apply之間的不同,就是傳參的方式不同
fn.apply(this,[1,2]); //不管多少個(gè),都用數(shù)組包裹傳參
fn.call(this,1,2); //一個(gè)個(gè)參數(shù)列出來(lái)傳
call,apply和bind的區(qū)別
call和apply都是即時(shí)調(diào)用,綁定既是調(diào)用,而bind不是,bind會(huì)返回綁定后的函數(shù),自行需要的時(shí)候再調(diào)用
學(xué)習(xí)要知其然知其所以然,我們來(lái)試試如何自己實(shí)現(xiàn)一個(gè)call,apply,bind吧
自己實(shí)現(xiàn)call,apply,bind
-
new綁定
function Vehicle() {
console.log(this);
}
Vehicle(); //window
new Vehicle(); //Vehicle這個(gè)new出來(lái)的對(duì)象
-
es6的箭頭函數(shù)
window.name = 'win';
const obj1 = {
name: 'joy',
getName: () => {
console.log(this); //window 調(diào)用前this是什么函數(shù)里面的this就是什么
console.log(this.name); //win
}
};
obj1.getName();
以上就是this指向5種綁定的方式,那么問(wèn)題來(lái)了,當(dāng)同時(shí)擁有幾種綁定方式,誰(shuí)的優(yōu)先級(jí)更高呢?
箭頭函數(shù) > new > 顯式 > 隱式 > 默認(rèn)綁定
具體可以自行去嘗試一下,這里就先給出結(jié)論
