1. 程式人生 > >js---call()和apply()改變指標問題

js---call()和apply()改變指標問題

1. 每個函式都包含兩個非繼承而來的方法:call()方法和apply()方法。(天生的)
2. 相同點:這兩個方法的作用是一樣的。

都是在特定的作用域中呼叫函式,等於設定函式體內this物件的值,以擴充函式賴以執行的作用域。

一般來說,this總是指向呼叫某個方法的物件,但是使用call()和apply()方法時,就會改變this的指向

call有兩個妙用:

          1: 繼承。

          2: 修改函式執行時的this指標。

區別:call和apply的區別在於call的第二個引數可以是任意型別,而apply的第二個引數必須是陣列或者arguments

<script>
    //一般來說,this總是指向呼叫某個方法的物件,但是使用call()和apply()方法時,就會改變this的指向。
    /*
    call方法:
    語法:call(thisObj,arg1,arg2,……,argN)
    定義:呼叫一個物件的一個方法,以另一個物件替換當前物件
    引數
        thisObj;可選項,將被用作當前物件的物件
        arg1,arg2,……,argN;可選項,將被傳遞方法引數序列
    說明
        call方法可以用來代替另一個物件呼叫一個方法。call方法可將一個函式的物件上下文從初始的上下文改變為有thisObj指定的新物件。
    
    如果沒有提供thisObj引數,那麼Global物件被用作thisObj
    */
    /*
    apply方法:
    語法:apply(thisObj,[arg1,arg2,……,argN])
    定義:應用某一個物件的一個方法,用另一個物件替換當前物件
    */
    //區別:call和apply的區別在於call的第二個引數可以是任意型別,而apply的第二個引數必須是陣列或者arguments
    //1.
    function add(a,b) {
        console.log(a+b);
    }
    function sub(a,b) {
        console.log(a-b);
    }
    add.call(sub,3,1);//用add來替換sub,add.call(sub,3,1)==add(3,1),結果是console.log(4);
    //2.
    function Animal(){
        this.name="Animal";
        this.showName=function(){
            alert(this.name);
        }
    }
    function Cat(){
        this.name="Cat";
    }
    var animal=new Animal();
    var cat=new Cat();
    animal.showName.call(cat);
    // 通過call或者apply方法,將原本屬於Animal物件的showName()方法交給物件cat來使用。結果為alert("Cat");
    //3.
    function Animal(name){
        this.name=name;
        this.showName=function(){
        alert(this.name);
        }
    }
    function Cat(name){
        Animal.call(this,name);
    }
    var cat=new Cat("Black Cat");
    cat.showName();
    //Animal.call(this)的意思是使用Animal物件代替this物件,那麼Cat中就有了Animal的所有方法和屬性了,Cat物件就能直接呼叫Animal的方法和屬性了。
    //4.
    function Class10(){
        this.showSub=function(a,b){
            alert(a-b);
        }
    }
    function Class11(){
        this.showAdd=function(a,b){
            alert(a+b);
        }
    }
    function Class2(){
        Class10.call(this);
        Class11.call(this);
    }
    //使用兩個call就實現多繼承了。
</script>

 

 

參考文獻:連結