this指向問題分析

一：全域性環境下的this

function f1()
function f2()
f1();//window
f2();//undefined

const foo=
} foo.fn();// 10
var fn1=foo.fn;
fn1();//window undefined

雖然fn函式在foo物件中作為方法被引用，但是在賦值給fn1之後，fn1的執行仍然是在window的全域性環境中。

在執行函式時，如果函式中的this是被上一級的物件所呼叫，那麼this指向的就是上一級的物件；否則只想全域性物件。

二：上下文物件呼叫中的this

當存在更複雜的呼叫關係時，有如下例題：

const person=}}
console.log(person.brother.fn());//mike

在這種巢狀的關係中，this指向最後呼叫它的物件，因此輸出mike.

const o1=
} const o2=
} const o3=
} console.log(o1.fn());//o1
console.log(o2.fn());//o1
console.log(o3.fn());//undefined

console.log(o1.fn.call(o2));

2、改寫o2

const o2=
}

const func=
} const bar=
func.logname.call(bar);

四、建構函式和this

new呼叫建構函式的具體過程：

var obj={};
obj.__proto__=foo.prototype;
foo.call(obj);

如果在建構函式**現了顯示return的情況，則分為兩種場景：

function foo();
return o;
}const instance=new foo();
console.log(instance.user);//undefined

此時instance返回的是空物件o。

function foo()
const instance=new foo();
console.log(instance.user);//lucas

此時instance返回的目標物件例項是this。

結論：如果建構函式中顯式返回乙個值，且返回的是乙個物件，那麼this就指向這個返回的物件；如果返回的不是乙個物件，那麼this仍然指向例項。

五、箭頭函式中this指向

箭頭函式使用this不適用以上標準規則，而是根據外層（函式或全域性）上下文來決定。

const fnn=)	}}
fnn.fn();//window

this出現在settimeout()中的匿名函式裡，因此this指向window物件。如果需要this指向fnn這個物件，可以巧用箭頭函式。

const fnn=)	}}
fnn.fn();//

六、this的優先順序

function foo()
const obj1=
const obj2=
obj1.foo.call(obj2);
obj2.foo.call(obj1);

function foo(a)
const obj1={}
var bar=foo.bind(obj1);
bar(2);
console.log(obj1.a);//2

上述**通過bind，將bar函式中的this繫結為obj1物件。執行bar(2)後，obj1.a的值為2。當再使用bar作為建構函式時：

var baz=new bar(3);
console.log(baz.a);

將會輸出3，bar函式本身通過bind方法構造的函式，其內部已經將this繫結為obj1，它再作為建構函式，通過new呼叫時，返回的例項已經與obj1解綁。也就是說new繫結修改了bind繫結中的this，因此new繫結的優先順序比顯式bind繫結更高。

function foo()
}const obj1=
const obj2=
const bar=foo.call(obj1);
bar.call(obj2);

將會輸出2，由於foo()的this繫結到obj1，bar()的this也會繫結到obj1，箭頭函式的繫結無法修改。

var a=123;
const foo=()=>a=>
const obj1=
const obj2=
const bar=foo.call(obj1);
bar.call(obj2);

箭頭函式的繫結無法修改，此時this繫結到window，所以會輸出123。但是如果把第一行a的賦值改為const a=123;則答案會輸出undefined，原因是因為使用const宣告的變數不會掛載到window全域性物件中，因此this指向window時自然找不到a變數。

開放題分析

模擬原生bind()：

function.prototype.mybind=function(context)
f.prototype=this.prototype;
var bound=function()
bound.prototype=new f();
return bound;
}function foo(a)
const obj1={}
var bar=foo.mybind(obj1);
var baz=new bar(3);
console.log(baz.a);

this指向問題分析

JS this指向分析

this指向問題

this指向問題

相關推薦