JS20min Day — 19 最困擾的「這個」(this)

Whien_Liou
Jul 30, 2017 · 5 min read

this?這個?對就是這個?所以到底是哪個呢?直接來一起了解吧!

this 就是這個,再白話一點就是「一個人」,每個人生出來一後,就會一個獨立的個體,會有自己的想法,自己的個性,全部都是獨一無二的,在 JavaScript 中大概就有類似的概念,而最簡單的簡稱就是用 this 來代表一個個體「實體」。

最常見的例子就是網頁本身,看看前幾篇所提到的範例,最常見到的 this 會是誰呢?直接開一個空白 JavaScript 檔案,輸入

console.log(this)

打開網頁的開發人員工具一探究竟,會發現其實就是 window!

window

也就是說,最初始的網頁其實就是一個 window,這個 window 就是整個網站的個體「實體」,想像他就是最大階級的管理者,任何資訊都可以告訴他,當然有些資訊也不一定會讓他知道。

所以當我們想要給他一些資訊或共享一些資訊時,就會先告訴 window 這個最大的管理者,例如

window.secret = 'Im hungry!'

也可以改成

this.secret = 'Im hungry'

是一樣的意思,因為這時候的 this 就是 window。


那有沒有機會會改變呢?是有的!來看看下面兩個例子

const obj = {
kk: function() {
console.log(this)
}
}
obj.kk()
const arr = [function() { console.log(this); }]
arr[0]()

這兩個例子中,分別會是什麼樣的結果呢?想個 3 秒鐘

1秒 2秒 3秒 —— 結果是

發現第一個 obj 的結果是 { kk } 其實就是 obj 本身,而 arr 的結果就是 [f] 其實也就是 arr 本身,實際上大概是這樣產出的

const obj = new Object()
obj['kk'] = function() { console.log(this) }
const arr = new Array()
arr[0] = function() { console.log(this) }

宣告變數時,會用 new 這個關鍵字來產生一個「個體」實體,這時候的 this 就會變成 Object 或 Array 了!


再來看一個例子

const obj = {
kk: function() {
console.log(this)
},
timer: function() {
setTimeout(function() {
console.log('timer this >> ', this)
}, 20)
}
}
obj.kk()
obj.timer()
const arr = [
function() { console.log(this); },
function() {
setTimeout(function() {
console.log('arr timer >>' + this)
})
}
]
arr[0]()
arr[1]()

覺得這樣的結果會是什麼呢?會發現一個很意想不到的結果

咦,怎麼會變成 [object Window] 跟 Window 了呢?通常網路上常講的會是說因為「環境」的不同,但這會比較難理解,其實就可以想像成,這兩個 setTimeout 所呼叫的函式(工人)其實都是從 window.setTimeout 所呼叫的方法,這樣想起來他們的 this 是 window 可能就比較好理解了!

Tips

this 這個關y鍵字是盡量少用的東西,因為 this 的「環境」常常會在一開始使用是被搞混,導致常常找不到 this 正確的位置,但時常遇到並且理解後,就會漸漸的比較能接受 this 的概念了~

看看其他相關教學

Day — 1 基本結構 (The Structure of JavaScript), 物件 (Object)

Day — 2 變數 (Variable)

Day — 3 運算子 (Operator)

Day — 4 函數 (Function)

Day — 5 流程控制 (Flow Control)

Day — 6 視窗 (Window), 時間控制(Timer)

Day — 7 認識 HTML, 認識元件, 命名元素 (HTML)

Day — 8 事件 (Event)

Day — 9 選擇器 (Selector), 改變樣式 (Style)

Day — 10 Event 進階應用

Day — 11 CSS Style 與 JavaScript 的互動

Day — 12 龜兔賽跑

Day — 13 jQuery 引用與基本使用 (jQuery)

Day — 14 淡出與淡入 (fadeIn, fadeOut)

Day — 15 滑動效果 (SlideUp, SlideDown)

Day — 16 設置內容 (text, html) 登入流程範例

Day — 17 生活化閉包 (Clouser)

Day — 18 關於回呼生活化 (Callback)

Day — 19 最困擾的「這個」(this)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade