JavaScript中的apply,call與this的糾纏

1.apply定義

apply:調用函數，並用指定對象替換函數的 this 值，同時用指定數組替換函數的參數。

語法：apply([thisObj[,argArray]])

thisObj

可選。要用作 this 對象的對象。

argArray

可選。要傳遞到函數的一組參數。

 

2.call定義

call:調用一個對象的方法，用另一個對象替換當前對象。

語法：call([thisObj[, arg1[, arg2[, [, argN]]]]])

thisObj

可選。將作為當前對象使用的對象。

arg1, arg2, , argN

可選。將被傳遞到該方法的參數列表。

3.二者區別

call 的第二個參數可以是任意類型，而apply的第二個參數必須是數組，也可以是arguments。

定義也是有差別的。

 

 

4.實例分析

 

    (1)官方實例：

function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3,  4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

 

第一個用apply的：定義：調用函數，並用指定對象替換函數的 this 值

調用函數callMe，使用指定的對象3替換callMe函數中的this,這時候這里的this就從之前的[object Window]變成了3。

第一個用call的：定義：調用一個對象的方法，用另一個對象替換當前對象。

調用對象callMe的方法，用另一個對象3替換callMe中的對象。

從這些結果分析中可以看出，這兩者都是使用指定的對象中的對象或者指定的值改變了對象中的this。

也可以說：是一個函數中的對象(this)"劫持"了另一個要執行函數中的對象(this)。

其實這里引出了一個問題：this到底是啥？為何如此重要的一次次來費勁心思的來改變它的指向？

傳送門：javascript技術難點（三）之this、new、apply和call詳解（這里面說的很棒，絕對夠你喝一壺）

    (2)實例：

function zqz(a,b){
    return alert(a+b);
}
 
function zqz_1(a,b){
 
    zqz.apply(zqz_1,[a,b])
}
 
 
zqz_1(1,2)    //->3 

分析：根據定義：調用函數，並用指定對象替換函數的 this 值，

這里調用函數zqz,並用指定的對象zqz_1替換zqz函數的this值。

 

要注意js中的函數名其實是對象，因為函數名是對Funtion對象的引用！

 

function add(a, b)
{
  alert(a + b);
}
function sub(a, b)
{
  alert(a - b);
}
add.call(sub, 3, 1); // 4

分析：根據定義：調用一個對象的方法，用另一個對象替換當前對象。

這里就是調用對象add的方法，並用add對象替換當前對象sub;

 

再來一個例子：

function zqz(a,b){
    this.name=a;
    this.age=b;
    alert(this.name+" "+this.age);
}
 
function zqz_1(a,b){
 
    zqz.apply(this,[a,b])     //我們亦可以這么寫    zqz.apply(this,arguments)  
}
 
 
zqz_1("Nic",12)    //Nic 12

分析：根據定義：調用函數，並用指定對象替換函數的 this 值，

這里調用函數zqz,使用指定的對象this替換函數zqz的this。

 

 

再來一個例子：

<input type="text" id="myText"   value="input text">
 
function Obj(){
    this.value="對象！";
}
 
var value="global 變量";
 
function Fun1(){
    alert(this.value);
}
 
 
Fun1();   //global 變量
 
Fun1.call(window);  //global 變量
 
Fun1.call(document.getElementById('myText'));  //input text
 
Fun1.call(new Obj());   //對象！
 
Fun1(); //global 變量

 

分析：定義：調用一個對象的方法，用另一個對象替換當前對象。

調用Fun1對象的方法，用window對象替換當前Fun1中的對象。

調用Fun1對象的方法，用input中對象替換當前Fun1中的對象。

調用Fun1對象的方法，用新new出來的obj中的對象替換當前Fun1中的對象。

 

5.繼承

例一：

 function ClassA(){  
        this.data = "a";  
        this.funA = function()  {  
             console.log(this.data);  
        }  
    }  
              
    function ClassB(){  
        this.data = "b";  
        this.funB = function(){  
            console.log(this.data);  
        }  
    }  
    
    //ExtendClassAClassB函數就具有了屬性data與方法funA或funB(占時不知道)  
    function ExtendClassAClassB(){    
        ClassA.call(this);   
        ClassB.call(this);   
    }  
              
    window.onload = function(){  
        var ecc = new ExtendClassAClassB();      
        ecc.funA();     
        ecc.funB();     
    }  

結果：b

          b

問題：

為什么是b?

我們可以看到調用的時候，this的指向

 

為什么兩個都是b?

ClassB.call(this) 將 ClassA.call(this)的屬性與方法覆蓋。最后只有ClassB的屬性與方法。

 

例二:這個看上去更像java里面的繼承感覺

 function ClassA(){
        this.name = 'zqz';
        this.fit = function(){
            console.log(this.name);
        }
    }

    function ClassBExtendClassA(){
        ClassA.call(this);
        this.job = 'coder';
    }

    var cbc = new ClassBExtendClassA();
    cbc.fit();
    console.log(cbc.constructor) //對象的引用
    console.log(cbc.job);

結果：zqz

        function ClassBExtendClassA(){

　　　　ClassA.call(this);
　　　　this.job = 'coder';
　　  }

       coder