關注前端開發
關注用戶體驗

JS—-this指向(二)

箭頭函數中this對象就是定義時所在的作用域,也就是說箭頭函數本身沒有this,內部的this就是外層代碼塊作用域中的this。

1、獨立函數

var a = 0
var test = ()=> {
    var a = 1
    console.log(this.a)
}

test()  //0

該箭頭函數在全局環境中定義,即this指向window

2、對象的方法

var a = 0
var obj = {
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}

obj.foo()  //0

即:
var a = 0
var obj = new Object
obj.a = 1
obj.foo = ()=> {
    console.log(this.a)
}
obj.foo()

如上所示,foo在全局中定義,所以this指向window,那么如何使this指向obj?

根據上一篇介紹,當函數作為對象的方法調用時this指向該對象,可以這樣改寫:

var a = 0
function foo(){
    var func = () => {
        console.log(this.a)
    }
    return func
}
var obj = {
    a : 1,
    foo:foo
}
obj.foo()()  //1

func在foo調用時定義,此時的foo所在作用域為obj,因此this指向obj

3、構造函數,因箭頭函數沒有this,固不能用作構造函數,否則會報錯

var foo = ()=> {
    console.log(this)
}
var boo = new foo()  //foo is not a constructor

4、bind/call

var a = 0

var func = ()=> {
    console.log(this.a)
}

var obj = {
    a: 1
}

func.call(obj)  //0

如上:func定義在全局,因此打印0,同對象方法,我們可以通過如下改寫,打印出1

var a = 0

var func = function() {
    var boo = ()=> {
        console.log(this.a)
    }
    return boo
}

var obj = {
    a: 1
}

func.call(obj)() //1
贊(442)
未經允許不得轉載:大前端 » JS—-this指向(二)
分享到: 更多 (0)

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算