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

this?這個?對就是這個?所以到底是哪個呢?直接來一起了解吧!
this 就是這個,再白話一點就是「一個人」,每個人生出來一後,就會一個獨立的個體,會有自己的想法,自己的個性,全部都是獨一無二的,在 JavaScript 中大概就有類似的概念,而最簡單的簡稱就是用 this 來代表一個個體「實體」。
最常見的例子就是網頁本身,看看前幾篇所提到的範例,最常見到的 this 會是誰呢?直接開一個空白 JavaScript 檔案,輸入
console.log(this)打開網頁的開發人員工具一探究竟,會發現其實就是 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)
