[筆記] 搞懂 javascript 的 this

發表於 | 分類於 | |

一般函式的this

  • 直接執行 -> window
  • 作為物件成員函示執行 -> 該物件本身
  • 作為 DOM 事件監聽函示 -> 該 DOM
  • 作為建構函式 -> 建構出來的實例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
console.log(this); // window

function a (){
  console.log(this); // 不一定，取決於函示如何執行
}

//1. 直接執行 
a(); // window

//2. 宣告物件
const obj = {
  name: 'object',
  a(){
    console.log(this); 
  }
}
obj.a(); // 做為物件成員，該函示的this就是該物件本身

const b = obj.a;
b(); //3. 直接執行 => window

//4. 作為dom監聽事件的函示，this代表該dom本身
const btn = document.getElementById('btn');
btn.addEventListener('click',a);

// 5. 建構函示 this代表new出來的物件
function A (){
  console.log(this);
}

const x = new A(); // A {} ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
///////////////////////
function bfunc(){
  console.log(this);
}

const secObg = {};
secObg.b = bfunc;
secObg.b() // secObg
///////////////////////
const objC = {
  a(){
    function b(){
      console.log(this);
    }
    b(); //直接執行
  }
}

objC.a(); // window
///////////////////////

const objD = {a};
btn.addEventListener('click',objD.a); //btn

箭頭函式的this

  • 永遠等於箭頭函式外面的this
1
2
3
4
5
6
7
8
const a = ()=>{
  console.log(this);
}
const obj = {
  a: ()=>{ console.log(this); }
}
obj.a(); // window
btn.addEventListener('click',a); // window
1
2
3
4
5
6
7
8
function a (){
  console.log(this);
  const b = ()=>{
    console.log(this); //永遠等於箭頭函式外面的this
  }
  b();
}
btn.addEventListener('click',a); // btn

bind & apply & call

  • 一般函式：指向綁定該物件的this
1
2
3
4
5
6

function a(){
  console.log(this);
}

const b = a.bind(0);  // Number {0}
  • 箭頭函式： bind & apply & call 會無效
1
2
3
4
5
6
7
8
9
10
11

const add = (x,y)=>{
  console.log(this); // window
  console.log(x+y);
}

const b = add.bind(0); // window
b(3,5);

add.apply(0,[3,5]); // window 無效
add.call(0,3,5); // window 無效