都說JavaScript 是一種很靈活的語言,這其實也可以說它是一個混亂的語言,下面透過本文給大家分享JavaScript中this的指向知識,有興趣的朋友一起看看吧
都說JavaScript 是一種很靈活的語言,其實也可以說它是一個混亂的語言。它把 函數式程式設計 和 物件導向程式設計 糅合一起,再加上 動態語言 特性,簡直強大無比(其實是不能和C++比的,^_^ )。
JS 裡的this
#在function 內部被建立
指向呼叫時所在函數所綁定的物件(拗口)this 不能被賦值,但可以被call/apply 改變
目錄
* 一個特例
* 開始判斷 * 法則一:物件方法中的this指向物件本身(箭頭函數形式的除外)
* 法則二:多層巢狀函數中的this指向等同於包含該this的最近一個function的this
* 習題集
* 普通函數中的this * 函數執行後返回另一個函數中的this(普通函數中)
* 多層巢狀函數中的this(計時器&箭頭函數)1
##一個特例
// 构造函数 function Student(name) { this.name = name } // 创建小明和小红两个实例 var XM = new Student('xiaoming') var XH = new Student('xiaohong') // 输出信息 console.log(XM) // Student {name: "xiaoming"} console.log(XH) // Student {name: "xiaohong"}在建構子中,this上的值會在建立實例的時候被綁定到新建立的實例上。不適用於下面的判斷方法,所以特此說明。 ############開始判斷############下面是典型例子,我們的分析從這裡開始。 ############
var x = { name: 'bw2', getName1: function() { console.log(this) }, getName2: function() { setTimeout(() => { console.log(this) },0) }, getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName1() // {name: "bw2", getName1: ƒ} x.getName2() // {name: "bw2", getName1: ƒ} x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}###法則一:物件方法中的this指向物件本身(箭頭函數形式的除外)############
var x = { name: 'bw2', getName1: function() { console.log(this) } } x.getName1() // {name: "bw2", getName1: ƒ}###法則二:多層巢狀函數中的this指向等同於包含該this的最近一個function的this######箭頭函數沒有獨立的this作用域,所以繼續往外層走,走到了getName: function( ){}。那麼就是他了,this指向等同於這個function內部的this指向。根據法則一,this指向物件本身。 ############
var x = { name: 'bw2', getName2: function() { console.log(this) // 等同于此处的this setTimeout(() => { console.log(this) // 原始的this位置 },0) } } x.getName2() // {name: 'bw2', getName1: ƒ}###我們可以試著在瀏覽器中運行,看看結果。 ######法則三:箭頭函數以及非指向物件方法中的function的情況下this指向window######根據法則二,this是指向最近的function,因此,這裡的this等同於返回的函數中的this,不是物件方法中的this,所以,指向全域。 ######是不是覺得有點奇怪?不過實踐證明確實如此。 ############
var x = { name: 'bw2', getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}#########習題集############歡迎大家依照法則一到三依序判斷,猜測結果,並在瀏覽器下測試。測試結果也可以回复,大家一起討論。 ######因本人能力有限,此系列法則可能在部分情況下失效。歡迎大家一起討論。 ######下面是做題時間。 #########普通函數中的this###############
function x() { console.log(this) } x()###函數執行後會傳回另外一個函數中的this(普通函數中)## ##########
function xx(){ return function() { console.log(this) } } xx()()###多層巢狀函數中的this(定時器&箭頭函數)1############
var x = { name: 'bw2', getName: () => { setTimeout(() => { console.log(this) },0) } } x.getName()###多層嵌套函數中的this(定時器&箭頭函數)2############
var x = { name: 'bw2', getName: () => { setTimeout(function() { console.log(this) },0) } } x.getName()####再次說明,該法則為實驗性法則,未進行大範圍的測試,不保證在所有情況下都有一致的結果。如果你發現了法則判斷失敗的情況,歡迎留言,一起探討。 ###
以上是如何判斷JavaScript中this的指向的詳細內容。更多資訊請關注PHP中文網其他相關文章!