讀書筆記(you don't know js): this的理解(沒寫完...)

基本概念

首先,函數不能存儲this的值,this指向哪裏,取決於調用它的對象。如果沒有這個對象,那默認就是window調用(非嚴格模式下)。也就是說this是在運行的時候定義的,不是在綁定的時候定義的。

    function foo(num) {
        console.log("foo: " + num);
        this.count++
    }
    foo.count = 0;
    for(var i = 0; i < 10; i++) {
        foo(i);
    }
    console.log(foo.count) //輸出是0,因爲調
    console.log(window.count) // 輸出是NAN, 因爲window.count沒有初始值

再貼一段代碼

    function foo() {
        var a = 2;
        this.bar();
    }
    function bar() {
        console.log( this.a );
    }
    window.a = 3;
    foo();//輸出3,這個時候,是window.foo,因爲bar也是由window調用

隱式綁定的問題

先看一個例子

    function foo() {
        console.log(this.a)
    }
    
    var obj = {
        foo: foo,
        a: 2
     }
     var bar = obj.foo();// 函數別名
     var a = "opps, global";
     obj.foo();// 輸出2
     bar();// 輸出opps, global,調用bar的是window

這個情況比較容易導致我們在傳回調函數的時候,出現this指向問題

    function foo() {
        console.log(this.a);
    }
    function doFoo(fn) {
        fn();
    }
    
    var obj = {
        a: 2,
        foo: foo
    }
    
    var a = "oops, global";
    doFoo(obj.foo); // 傳遞了一個函數過去,這個函數由window調用,所以最後輸出的是"opps, global"

當然我們可以很簡單地用一個bind來解決問題

    doFoo(obj.foo.bind(obj) 

顯示綁定(未完待續)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章