摸清this指向是一條漫長的路

2022-05-09 06:30:12 字數 3190 閱讀 1087

預設繫結:

var name = '

tiboo

'function sayhi()

sayhi(); // sayhi執行在全域性環境

隱式繫結:

函式的呼叫是在某個物件上觸發的,即呼叫位置上存在上下文物件

var name = '

yangfu

'function sayhi()

var testman =

testman.sayhi()

// 物件屬性鏈中只有最後一層影響到呼叫位置

var name = '

yangfu

'function sayhi()

var testman1 =

var testman2 =

testman1.man.sayhi()

console.log(testman1.man)

//hello, tiboo2

繫結丟失:

function sayhi() 

var testman =

//此時man直接指向了sayhi, 和testman沒啥關係

var man =testman.sayhi

var name = "

yangfu

"man()

顯示繫結:

function sayhi()

var testman =

var name = '

yangfu

'var man =testman.sayhi

//指向被忽略,實際應用的是預設繫結規則,預設繫結其實沒研究透,待補充)

function sayhi()

var testman =

var name = 'yangfu'

testman.sayhi.call(null)

new繫結:

var name = '

tiboo

'function sayhi(name)

var man = new sayhi('

tiboo2')

console.log(man.name)

//tiboo2

箭頭函式:

沒有使用箭頭函式:

var obj =

}}

let hi = obj.hi(); //

輸出obj物件

hi(); //

window物件

使用箭頭函式後:

var obj = }}

let hi = obj.hi(); //輸出obj物件

hi(); //輸出obj物件

自執行函式:

var obj =)()

}}

let hi = obj.hi();

基本上關於this的指向就那麼多了,下面是我收集的一些關於this的面試題或者自認為比較有趣的題,孰能生巧,複雜的事情都是由最簡單的事情拼接而來的,so,只要肯花心思,問題便不再是問題。

案例一:

var a =

};a.fun();

//物件呼叫, this指向a, this.name = 'a'

a.fun.call(); //

使用call改變作用域,this指向新建立物件, this.name = 'b'

var fun1 = a.fun; //

將物件方法賦值給乙個全域性變數

fun1(); //

this指向全域性, 為空

案例二:

var number = 5;  

var obj =

})()

} var myfun = obj.fn; //

自執行, this.number(window) = 10

myfun.call(null); // this指向window, 傳入null導致預設繫結,

this.number(window) = 20; num = 10; number = 9

; obj.fn();

//this指向obj, num = 3; 閉包導致上次number值為9存在於記憶體中, number = 27

console.log(window.number); //

20

案例三:

筆試題遇到的,當時只覺得頭都繞大了,開始沒看清,就想a都沒定義,不會報錯麼

var fn =(function(a) 

}(function(a, b) (

3, 4

))) fn(7)

解題步驟:

//

簡化:(function(a, b) (

3, 4)) //

執行得到結果3

//那麼,上面function化簡

var fn =(function(a)

}(3)) //

自執行函式this指向window,傳入引數3後, this.a(window) = 3;

fn(7) //

fn()執行是閉包,此時this指向window, a = a + this.a = 3 + 7 = 10

案例四: 

function fun(n,o) 

};}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//

undefined,?,?,?

var b = fun(0).fun(1).fun(2).fun(3);//

undefined,?,?,?

var c = fun(0).fun(1); c.fun(2); c.fun(3);//

undefined,?,?,?

案例五: 待補充

人生的路沒有一條是白走的

繼昨天考慮的問題,我在考慮是從事軟體開發工作呢,還是從事產品經理方向,處於思考與選擇中。暫時叫石同學吧,她復旦碩士畢業之後在上海找了一家單位做產品經理,和我一樣,他也是轉行過來的。我和他的認識,是因為我們共同的同學 石。我和石是研究生同學,我們是在考雅思的時候認識的,我們一起經歷了考雅思的整個過程,...

創業是一條永遠在變的路

作為連續創業者,我們已經在創業這條路上走了五個多年頭。我們將創業以及做產品的一些感受分享出來,希望那些準備創業或者正在創業途中的人可以獲得一些新的啟發。1.工作狂等於悲劇英雄 工作狂就是英雄?我先不笑,先通過以前我們團隊的乙個場景來說 以前我們團隊有三五個工作狂,經常加班 熬夜。每一次下班前,已完成...

簡潔是唯一的出路,是漫長的路

10年快過了四分之一了,簡潔的聲音,一直就沒停過。今天翻看10年第3期的程式設計師雜誌。剛拿到手裡,第一眼覺得封面顏色特別乾淨,因為有很大的部分留白,不像以前七彩虹的封面 第二眼就瞄到了15元,以前第一次自己掏腰包買的時候,找了老半天的 第三眼看到了 p46 p92,精彩課題文章的頁數,以前只是寫精...