[學習筆記] 邊學邊寫 JavaScript 30天 (28)：this I

2022 iThome 鐵人賽

DAY 28

Modern Web

[學習筆記] 邊學邊寫 JavaScript 30天系列第 28 篇

14th鐵人賽

LeeFang

團隊好想工作室 v6.0

2022-10-13 20:03:47

622 瀏覽

分享至

今天內容

this 的預設
this 的值
從 call function 來理解 this

筆記

this的預設值

function test() {
  console.log(this)
  //node.js預設是global，瀏覽器上面是window，依環境會不同但都是全域的。
  console.log(this === global) //true
}
test()
//---------------------------
"use strict"; //嚴格模式，必須放在第一行。後面才會有此效果。
function test() {
  console.log(this) //undefined
  console.log(this === global) //false
}
test()
//在非物件導向以外的this值大部分都會是預設值，嚴格模式會是undefined

一些例外情形，例如在瀏覽器操作

document.querySelector(".btn").addEventListener("click", function(){
  this  
})

這個this沒有在物件導向裡面，但這裡的this會指到當下點擊的那個按鈕。

this 的值：this的值是怎麼呼叫他決定的，不同於function的scop chian是看程式碼位置。

"use strict";
const obj = {
  test: function() {
    console.log(this) 
  }
}
obj.test() // this是obj { test: [Function: test] }
//--------------------------
"use strict";
const obj = {
  test: function() {
    console.log(this)
  }
}
var func = obj.test
func()  //this是undefined。

從 call function 來理解 this

"use strict";
function test(a,b,c) {
    console.log(this,a,b,c)
  }
test(1,2,3)   //undefined 1 2 3
//第一個會回傳this，在非物件導向以外的this值大部分都會是預設值。嚴格模式預設值undefined
test.call(111,1,2,3)   //111 1 2 3
//用call傳進去的第一個值是this，後面參數。
test.apply(111,[1,2,3])  //111 1 2 3
//用apply第一個是this，後面的才是參數(但需陣列)。

call和apply回傳的第一個值都是this差異在call後面接的是參數，但apply後面的參數只能接受陣列。

從傳什麼給this，this就會是什麼來看。把調用function方式改成call來看this。

const obj = {
  test: {
    inner: function() {
      console.log(this)
    }
  }
}
obj.test.inner()  //{ inner: [Function: inner] }
obj.test.inner.call(obj.test) //{ inner: [Function: inner] }

從上面的改寫相等來找this
const func = obj.test.inner
func() 看成 func.call(func) //undefined
找.call前面的func，func前面沒東西的即undefined
若有一個呼叫是obj.test() 看成 obj.test.call(obj)
一樣是找.call前面的方式，以此類推。