this的相關系結規則

所謂的this指向，就是一個物件，不同呼叫情況下同一個this的指向都可能不同，同時我們也可以手動修改this指向，

一、默認系結

如下圖所示

var a = 1
   var obj = {
     a: 2,
   }
   function fn() {
    // 'use strict'
     console.log(this.a)
   }
   fn()

如果在函式呼叫fn（）前什么也沒有，那么此時的fn內的this —> window，也就是控制臺列印的a為全域變數中的 a = 1，

在這里插入圖片描述
這里要注意如果在嚴格模式（use strict）下this將不會指向window，而是會報錯，

在這里插入圖片描述

二、隱式系結

如下圖所示

var a = 1
      var obj = {
        a: 2,
        fn: function () {
          console.log(this.a)
        },
      }
      obj.fn()
      var objj = {
        a: 3,
        b: obj,
      }

      objj.b.fn()

如果函式呼叫前有物件【obj.fn( ) / objj.b.fn()】，此時fn中的this會指向距離最近的obj，就像上述代碼中控制臺會列印兩個2.
在這里插入圖片描述
來一個小測驗測驗以下朋友們

function fn1() {
        console.log(this.a)
      }
      var obj = {
        a: 1,
        fn1: fn1,
      }
      var a = 2
      function fn2(fn) {
        fn()
      }

      fn2(obj.fn1)

這里的答案為2，因為在fn前什么也沒有，所有這邊是我們說的默認系結，也就是this ——>window，看到這里有沒有對前兩種的系結有更深的理解？

三、顯示系結

   var a = 1
         function fn() {
           console.log(this.a)
         }
         var obj = {
           a: 2,
         }
         fn.call(obj)

當使用了call/bind/apply去處理函式fn時，此時，fn的this指向（call、bind、apply）第一個引數，就像上述代碼中this指向的是obj，所以答案為2.
當然也有特例

fn.call(null)

當call、bind、apply的第一個實參傳遞的是null、undefined，會讓顯示系結規則失效，這題就會變成默認系結，答案為1.

四、 new系結

function Person() {
          console.log(this)
          this.a = a
        }
        var p = new Person()

如果函式是建構式，此時this指向實體化物件，
這里我們可以稍微拓展以下，
這里new的作用是：1.修改函式this的指向
2.可以呼叫函式，有意思的是在控制臺中列印new Person ，也是可以成功的列印出實體化物件，
感興趣的小伙伴可以在控制臺中試一下，

拓展

問：當出現多個系結方式的時候該如何確定this的指向呢？

答：他們其實是有一個優先級的，
new > 顯式 > 隱式 > 默認，

看到這里，對于this指向問題有沒有一個更加深刻的理解，希望這篇隨筆能對大家有所幫助，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/68843.html

標籤：其他

上一篇：座位號的傳值問題實體，父子組件傳值修改為vuex

下一篇：Js中的資料型別:Js原始型別和Js參考型別 Js包裝物件 Js垃圾回收 Js按值傳遞