1. 程式人生 > >javascript——this的用法

javascript——this的用法

當呼叫函式的時候,this引數也將預設的傳遞給函式。this引數代表函式呼叫的時候相關聯的物件。被稱為函式的上下文。

一般,呼叫函式有以下4中形式:

  • 作為一個函式——test()直接被呼叫
  • 作為一個方法——obj.test(),關聯在一個物件上。
  • 作為一個建構函式——new obj,例項化一個新的物件
  • 通過函式的apply或者call方法——test.apply(obj)或者test.call(obj)進行

現在討論在這四種情況下的this的情況

一、作為函式直接被呼叫

function test1(){
    return this;
}
function test2(){
    "use strict";
    return this;
}
console.log(test2())

當函式以直接的形式被呼叫的時候,有兩種可能:在非嚴格模式下,它將是全域性上下文(一般而言是window),而在嚴格模式下,它將是undefined。

二、作為方法被呼叫

當函式作為某個物件的方法被呼叫的時候,該物件會成為函式的上下文,並且在函式內部可以通過引數訪問到。

function show(){
    return this;
}
var myTest = {
    getTest:show
}

console.log(myTest.getTest() == myTest);

最終的得到的結果是true,表明this所指向的上下文就是myTest這個物件。

三、作為建構函式呼叫

function myTest(){
    this.show = function (){
        return this;
    }
}

var obj = new myTest();
console.log(obj.show() == obj)

      在這裡建立了一個myTest的一個函式作為建構函式,當我們new關鍵字呼叫的時候會建立一個空的例項化物件,並且將其作為函式的上下文(this引數)傳遞給函式。  在這裡討論一下建構函式的返回值問題:

function myTest(){
    this.show = function(){
        return true;
    }
    return 1;
}

console.log(myTest() === 1)    //true
var test = new myTest();    
console.log(test)        //myTest { show: [Function] }
console.log(test.show() === 1)    //false
console.log(test.show())        //true

從上述程式碼的執行結果可以看得出,單純只是在呼叫myTest函式的時候,返回的結果是1,但是如果將myTest例項化以後並呼叫其show方法,結果就是show方法的返回值。再做下面一個測試:

var test1 = {
    shuxing1 : true
}

function myTest(){
    this.shuxing1 = false;
    return test1;
}

var aa = new myTest();
console.log(aa)        //{ shuxing1: true }
console.log(aa.shuxing1)    //true 

這裡,在建構函式內返回了一個物件test1,然後呼叫了myTest的構造方法,但這時,建構函式的返回值變成了test1這個物件。所以,輸出的例項化物件中,aa變成了test1類。總結以上兩點就是:

  • 如果建構函式返回一個物件,則該物件將作為整個表示式的返回值,而傳入的建構函式this將被丟棄。
  • 但是,如果建構函式返回的是非物件型別,則會自動忽略這個返回值,返回新建立的物件。

四、使用apply或者call方法呼叫

javascript提供了與一種方法可以顯示的指定任何物件作為函式的上下文。利用apply或者call方法即可實現,呼叫這兩個方法的時候,需要傳入兩個引數:作為函式上下文的物件和作為函式呼叫時的一個數組物件。下面是這個例子的例項:

function addSum(){
    var result = 0;
    for(var i = 0;i < arguments.length;i++){
        result += arguments[i];
    }
    this.result = result;
}

var test1 = {}
var test2 = {}

addSum.apply(test1,[1,2,3,4,5]);
addSum.call(test2,1,2,3,4,5);

console.log(test1.result);    //15
console.log(test2.result)        //15