javascript——this的用法
阿新 • • 發佈:2018-12-15
當呼叫函式的時候,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