詮釋JavaScript中的this

使用this的幾種場合

1. 執行函數時,判斷函數是對象方法還是一個單獨的函數?單獨的函數this===window;

對象方法,this == 對象。

 

復制代碼

function UseThis(){

console.log(this === window);

this.instancePro = 1;

}

UseThis.objPro = 2;

UseThis.objMethod = function(){

console.log(this.objPro);

}

UseThis();//true 不管嵌套多深,執行函數時,函數內的this === window

console.log(instancePro);// 1

 

var useThis = new UseThis();//false 當前是A是個構造函數,構造函數內的this,是new創建的實例

console.log(useThis.instancePro);// 1

 

UseThis.objMethod();//2 當前函數是對象方法,this===UseThis

var fn = UseThis.objMethod;

fn();//undefined

復制代碼

打開測試頁面,啟動調試器

 

 

2. 函數由bind方法返回後,this指向bind的第一個參數。

 

 

3. 通過call(apply)執行函數,this指向call(apply)的第一個參數。

 

復制代碼

/*函數兩次調用call*/

function doubleBind() {

  console.log(this.doubleVariable);

}

(function () {

  console.log(this.doubleCalendar);//2

  doubleBind.call({doubleVariable: 1});// 1

}).call({doubleVariable: 2});

復制代碼

 

 

4. 一個函數,先調用bind,再使用call執行時,this指向bind的第一個參數。

 

/*由函數Bind綁定返回函數再調用call*/

function funBind() {

    console.log(this.pro);

}

var relFun = funBind.bind({pro: 2});

relFun.call({pro: 3});// 2

 

 

出道題

復制代碼

var con_inObj = {

   variable :"sprying",

   cons_fun:function(){

       console.log(this.variable);

   }

}

var new_obj = new con_inObj.cons_fun();//?

 

<!– from 前端亂燉 –>

var x = 5;

var example = {

    x: 100,

    a: function () {

        var x = 200;

        console.log('a context: %s, var x = %s', this.x, x);

    },

    b: function () {

        var x = 300;

        return function () {

            var x = 400;

            console.log('b context: %s, var x = %s', this.x, x);

        };

    },

    c: function () {

        var other = {

            x: 500

        };

        var execB = this.b().bind(other);

        execB();

        return execB;

    }

}

console.log('example.x:' + example.x);

example.a();

example.b()();

example.a.call({

    x: 9999

});

 

var execB = example.c(); 

execB.call({

    x: 9999

}); 

復制代碼

 

發佈留言