第一道
function test() {
? ? console.log(this.name);
}
var obj = {
? ? name: 'whoami',
? ? getName: test
};
var name = 'which';
obj.getName();
var output = obj.getName;
output();
我的答案：'whoami',? 'which'
對(duì) （在嚴(yán)格模式下，答案為'whoami', undefined）
第二道
function test() {
????console.log(this.name);
}
var obj = {
????name:'whoami',
????getName: test
};
setTimeout(obj.getName,1000);
我的答案：'whoami'
錯(cuò)。答案為undefined
第三道
function test(x){
????this.x = x;
????return this;
}
var x = test(5);
var y = test(6);
console.log(x.x);
console.log(y.x);
我的答案： undefined，?undefined
對(duì)，錯(cuò)。答案為undefined，6
解答：
第一道題涉及的知識(shí)點(diǎn)：this綁定的兩種方式以及綁定丟失
第二道題…：this隱式綁定、綁定丟失
第三道題…：this默認(rèn)綁定、變量提升、同名變量知識(shí)
在徹底明白上面結(jié)果是如何得來前，先具體講解下this的綁定時(shí)間、四種綁定方式以及其優(yōu)先級(jí)：
this存在于所有函數(shù)中，在函數(shù)調(diào)用時(shí)被賦值
1.默認(rèn)綁定
此時(shí)this的指向是window對(duì)象（非嚴(yán)格模式下，嚴(yán)格模式下 默認(rèn)綁定this === undefined）
function test() {
????console.log(this);
}
test();? // this === window
2.隱式綁定
此時(shí)this指向包含它的對(duì)象
function test(){
????console.log(this);
}
var obj = {
? ? getValue: test
};
obj.getValue();? ?// obj {}
3.顯式綁定
就是使用call、apply或bind方法來顯式綁定
function test() {
? ? console.log(this);
}
var obj = {
? ? name: 'whoami'
};
test.call(obj);? // obj {name: 'whoami'}
4.new綁定
就是使用new關(guān)鍵字會(huì)存在this的綁定
functionTest() {
????console.log(this);
}
var test = new Test();? // Test(){}
這四種方式的優(yōu)先級(jí)如下（從高到低依次）：
new綁定 > 顯式綁定 > 隱式綁定 > 默認(rèn)綁定
綁定丟失
凡事總有例外，this的綁定也是，下面說明幾種例外：
1、賦值帶來的綁定丟失
function test() {
? ? console.log(this);
}
var obj = {
? ? getValue: test // 此處是隱式綁定
};
var output = obj.getValue; // 賦值
output(); // 賦值導(dǎo)致綁定丟失，此時(shí)應(yīng)用默認(rèn)綁定
/**
* (output = obj.getValue)() 等價(jià)于output()
*/
/**
* setTimeout() 實(shí)際上類似于
* function setTimeout(fn, delay) {
* }
* fn = obj.getValue故也會(huì)導(dǎo)致綁定丟失，應(yīng)用默認(rèn)綁定
*/
setTimeout(obj.getValue, 1000);
2、null或undefined帶來的綁定丟失
function test() {
? ? console.log(this);
}
test.call(null);? ?// this === undefined(嚴(yán)格模式下)
test.call(undefined);? ?// this === window(非嚴(yán)格模式下)
test.call(2);? // 此時(shí)應(yīng)用顯式綁定，因?yàn)槌薔ull、Undefined類型之外的其他類型在進(jìn)行操作時(shí)都會(huì)在底層產(chǎn)生該類型的對(duì)象
再回頭看三道面試題：
第一道是隱式綁定，不過存在賦值導(dǎo)致綁定丟失，應(yīng)用默認(rèn)綁定
第二道同樣如此
第三道是默認(rèn)綁定，不過主要考察點(diǎn)在于變量提升以及同名變量的處理
就具體分析下第三道面試題：
function test(x) {
? ? this.x = x;
? ? return this;
}
var x = test(5);
var y = test(6);
console.log(x.x);
console.log(y.x);
因?yàn)槿肿兞繒?huì)自動(dòng)成為window的屬性、變量和函數(shù)提升的問題，上面的代碼實(shí)際上如下：
function test(x) {
? ? // this === window,所以this.x = window.x
? ? this.x = x;
? ? return this;
}
var x, y;
x = test(5);
// 此時(shí)window.x === x, x === widnow
y = a(6);
// 此時(shí)x === 6
// x.x 此時(shí)為6.x, 故為undefined
console.log(x.x);
// y.x 此時(shí)為window.x
console.log(y.x);
下面補(bǔ)充下其他情況this指向：
函數(shù)內(nèi)部函數(shù)中this指向的問題,在內(nèi)部函數(shù)中this使用默認(rèn)綁定
function test() {
? ? (function() {
? ? ? ? console.log(this);
? ? })();
}
test(); // this === window
ES6中增加了箭頭函數(shù)，該函數(shù)有兩個(gè)作用：
簡(jiǎn)寫函數(shù)定義
this指向明確，指向該函數(shù)所在作用域的this的值
實(shí)例：
var test = () => console.log(this);
test(); // this === window
test.call({}); // this === window
