who is self?又跟 this 有何差異?

前言

實際開發上來講,其實是有機會看到這個單字,所以就來了解一下 self 是什麼以及它與 this 有何差異。

self 與 this 的關係

self 非常的簡單,當你在瀏覽器上輸入 self 的時候,你會得到一個 window 物件,而這個 window 物件就是瀏覽器本身。

這邊我們也知道一件事情 this 在正常狀況下直接呼叫會形成所謂的簡易呼叫,因此會指向到 window

1
self === this; // true

感覺彼此很類似對吧?此刻你會不會認為它的運作模式跟 this 一樣呢?先不要急,我們先繼續看下去。

self 還有一些很有趣的地方,例如:

1
2
3
4
5
window === self; // true
window.self === self; // true
window.self.window.self.window.self === self; // true
self.window === self; // true
self.self.self.self.self === window // true

應該覺得很混亂了吧?先來解釋一下它是否與 this 運作方式相同,先看一段範例:

1
2
3
4
5
6
7
8
9
var myName = 'Ray1'
var obj = {
myName: 'Ray2',
fn(){
console.log('this:', this.name); // this: ??
console.log('self:', self.name); // self: ??
}
}
obj.fn();

猜到答案了嗎?答案是:

1
2
3
4
5
6
7
8
9
10
var myName = 'Ray1';

var obj = {
myName: 'Ray2',
fn(){
console.log('this:', this.myName); // this: Ray2
console.log('self:', self.myName); // self: Ray1
}
}
obj.fn();

奇妙吧?這邊我們可以驗證一件事情,代表著 self 不管怎麼樣都是指向在 window,並不會隨著你呼叫方式而改變指向,這邊也額外出一個題型給你試著思考結果:

1
2
3
4
5
6
function fn () {
console.log(window === self); // ?
console.log(window.self === this); // ?
console.log(window === this); // ?
}
fn.call({});

而通常來講可能會看到有些人這樣宣告變數儲存 this

1
var self = this;

但是在某些狀況下可能會發生一些問題,因此通常會建議改命名為以下:

1
2
3
var that = this;
var vm = this;
var thiz = this;

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ