iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
Modern Web

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

[學習筆記] 邊學邊寫 JavaScript 30天 (29):this II

  • 分享至 

  • xImage
  •  

今天內容

  • 理解this小題目
  • 強制綁定 this:bind
  • arrow function 的 this

筆記

  • 理解this小題目(想完再到最下方看答案)

    "use strict";
    function log() {
      console.log(this);
    }
    
    var a = { a: 1, log: log };
    var b = { a: 2, log: log };
    
    log();
    a.log();
    b.log.apply(a)
    
  • 強制綁定 this:bind

    "use strict";
    const obj = {
      a: 1,
      test: function() {
        console.log(this)
      }
    }
    obj.test()    //{ a: 1, test: [Function: test] }
    const func = obj.test
    func()   //undefined
    

    以上面這個例子來看,func會找不到this值,可以用bind直接將this值綁定住。

    "use strict";
    const obj = {
      a: 1,
      test: function() {
        console.log(this)
      }
    }
    const func = obj.test.bind(obj)
    func()   //{ a: 1, test: [Function: test] }
    

    加上.bind(obj)可以直接將this綁到obj.test()

    "use strict";
    const obj = {
      a: 1,
      test: function() {
        console.log(this)
      }
    }
    const func = obj.test.bind("aaa")
    func()  //aaa
    

    bind可以直接賦值this值。

    "use strict";
    const obj = {
      a: 1,
      test: function() {
        console.log(this)
      }
    }
    const func = obj.test.bind("aaa")
    func.call(123)  //aaa
    

    就算用.call直接給this值也不會被再次改到。

  • arrow function 的 this,一樣的function寫成arrow function讓this的回傳不一樣。

    class Test {
      run() {
        console.log("run this:", this)
        setTimeout(function() {
          console.log(this)
        }, 1000);
      }
    }
    const t = new Test()
    t.run()
    

    寫成 arrow function

    class Test {
      run() {
        console.log("run this:", this)
        setTimeout( () => {
          console.log(this)
        }, 1000);
      }
    }
    const t = new Test()
    t.run()
    

    結果附圖:紅框處

    arrow function裡面的this跟怎麼呼叫沒有關係,跟scope比較像,跟定義在哪裡比較有關係,這種情形比較像是特例。

  • 理解this小題目(答案)

    "use strict";
    function log() {
      console.log(this);
    }
    
    var a = { a: 1, log: log };
    var b = { a: 2, log: log };
    
    log();    // undefined
    a.log();  // { a: 1, log: [Function: log] }
    b.log.call(a); // { a: 1, log: [Function: log] }
    // b.log.call(a)括號內的a就是this的值,不用管.call前面是誰。
    

參考資料


上一篇
[學習筆記] 邊學邊寫 JavaScript 30天 (28):this I
下一篇
[學習筆記] 邊學邊寫 JavaScript 30天 (30):後記
系列文
[學習筆記] 邊學邊寫 JavaScript 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言