為什么需要this

js中

    var a = 'window'
    var obj = {
        a:'obj',
        func: function(){
            console.log(this.a)
        }
    }
    obj.func()  //  obj
    var func = obj.func
    func()      //  window

js中執行上面的代碼會有這樣結果，雖然obj.func和func指向的是同一個函式，但是因為它們所處的運行環境不一致，所以列印結果也不同，而this就是用來指明當前函式的運行環境的

this的系結形式

this系結可以分為五種形式，分別是默認系結、顯式系結、隱式系結、new系結、箭頭函式的this系結

默認系結

當函式呼叫無任何呼叫前綴時，this默認執行全域物件（非嚴格模式）

    var a = 'window'
    function func1(){
        console.log(this.a)   // window
        var a = 1
        function func(){
            console.log(this.a,a)   //  window  1
        }
        func()
    }
    func1()

隱式系結

函式呼叫時，this指向呼叫自己最近的物件

    var obj2 = {
        a:'obj2',
        func:function(){
            console.log(this.a)
        }
    }
    var obj = {
        a:'obj',
        b:obj2,
    }
    obj.b.func()  //  obj2

顯式系結

顯式系結指我們通過call，apply和bind方法改變this的指向，在這個程序中this指向的變化可以被清晰感知

    var a = 'window'
    var obj = {
        a:'obj'
    }
    function func(){
        console.log(this.a)
    }
   func.call(obj)     //  obj
   func.apply(obj)    //  obj
   func.bind(obj)()   //  obj

new系結

new運算子會將this指向新生成的實體

   function func(){
        this.a = 'a'
   }
   var newFunc = new func()
   console.log(newFunc.a,newFunc)      //  a   func {a:'a'}

箭頭函式的this

箭頭函式的this指向它定義時外層環境的this指向，也就是說它自身沒有this，指向誰靠的是外層環境的this，并且一旦指定無法變更

    function func(){
        this.name = 'func'
        var obj ={
            name:'obj'
        }
        var a = ()=>{
            console.log(this.name)
        }
        a()            //  func
        a.call(obj)    //  func
    }
    func()

在這個示例中，使用call依舊不能改變this的指向

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

標籤：其他

上一篇：http爬蟲簡易版

下一篇：旅游網站頁面