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

發表於 2021-09-14 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

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

前言

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

self 與 this 的關係

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

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

1	self === this; // true

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

self 還有一些很有趣的地方，例如：

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 運作方式相同，先看一段範例：

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

猜到答案了嗎？答案是：

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，並不會隨著你呼叫方式而改變指向，這邊也額外出一個題型給你試著思考結果：

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;

參考文獻

What underlies this JavaScript idiom: var self = this?