2021-03-19

JavaScript

3 分鐘閱讀文 (大約 375 個字)

JS 觀念 - this 指向

MDN this 文件

this 指向

this 的指向為何
var obj = {
  name: '小明',
  fn: function(params) {
    console.log(params, this, window, arguments);
  }
}

obj.fn(1, 2, 3); // 這邊 this 指向 obj

simple call

注意：this 的指向相當複雜，大部分情境(95%)只需要了解其中一種即可
傳統函式中的 this 只與調用方式有關

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}

callSomeone(); // 全域

呼叫 callSomeone 時前方沒有物件，屬於 simple call ，simple call 指向全域

應用變化

1.

在呼叫函式時，如果前面有任何一個物件，那麼 this 就會指向前一個物件 obj，因此 console.log 的結果就是物件而非全域。

2.

在呼叫 callSomeone 前有 obj2 這個物件， this 指向 obj2 ，因此 console.log 的結果就是物件2而非全域。

3.

在呼叫 callSomeone 時，前一個物件是 innerObj ， this 指向 innerObj，因此 console.log 的結果就是內層物件而非外層物件、全域。

4.

調用 callSomeone 時，前方沒有物件，屬於 simple call，因此 console.log 的結果就是全域。

5.

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}

var obj4 = {
  someone: '物件 4',
  fn() {
    // callback funtion
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}

obj4.fn(); // 全域

callback funtion 大部分來說屬於 simple call 形式，因此 console.log 的結果就是全域。

# ES6, JavaScript

KAY CHEN

學習筆記

Taiwan

文章

分類

標籤

追蹤

JS 觀念 - this 指向

this 指向

simple call

應用變化

1.

2.

3.

4.

5.

菜鳥學前端

文章目錄

連結

分類

標籤雲

最新文章

彙整

標籤

最新文章

彙整

標籤