who is 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?

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

前言

self 與 this 的關係

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

self 與 this 的關係

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

關於 JavaScript 的 this 各種用法與探討

一個時代的王者 jQuery，為什麼沒落了？

什麼是 JavaScript 的 Generator Functions (function*)？

JavaScript 數字格式化：最簡單的方法（千分位與貨幣）

分享這篇文章

留言