老生常談javascript之call,apply的區別

剛開始看到javascript的函數apply和call時,很是的模糊,不知所云,而後看書,網上查詢多少知道點了眉目,下面是我作的筆記,但願和你們分享,有不對之處但願各位多多指正,共同進步。。。
本文將從三個方面介紹apply,call的用法javascript

1. apply,call的定義和區別
2. 什麼狀況下使用apply,什麼狀況下使用call
3. 巧用applyhtml

  1. apply,call的定義和區別
    apply:方法能劫持另一個對象的方法,繼承另一個對象的屬性.
    Function.apply(obj,args)方法能接收兩個參數
    obj:這個對象將代替Function類裏this對象(就是定義函數代碼塊裏面的this)
    args:這個是數組,它將做爲參數傳給Function(args-->arguments),這個能夠是數組也能夠是 argumentsjava

    call和apply的意思同樣,惟一不一樣的是接受的參數不一樣,
    Function.call(obj,[param1[,param2[,…[,paramN]]]])
    obj:這個對象將代替Function類裏this對象
    params:這個是一個參數列表數組

    aplly示例
    //定義一個Animal的類
    function Animal(name,age){瀏覽器

    this.name = name;
       this.age = age;

    }
    //定義一個cat類
    function Cat(name,age,kind){app

    Animal.apply(this,arguments);//調用Animal的方法,並將裏面的this,轉換成Cat實例
       this.kind = kind;

    }
    var cat = new Cat('yingwu',4,'cat');函數

分析: Animal.apply(this,arguments);
this:在建立對象在這個時候表明的是cat實例
arguments:是一個數組,也就是[「zhangsan」,」21」,」一年級」];
也就是通俗一點講就是:用cat去執行Animal這個類裏面的內容,在Animal這個類裏面存在this.name等之類的語句,這樣就將屬性建立到了catt對象裏面this

call示例,將上面代碼變成call就是
Animal.call(this,name,age)//其餘的保持不變,這就是差uncanbutongprototype

  1. 什麼狀況下用apply,什麼狀況下用call

在給對象參數的狀況下,若是參數的形式是數組的時候,好比apply示例裏面傳遞了參數arguments,這個參數是數組類型,而且在調用Animal的時候參數的列表是對應一致的(也就是Animal和Cat的參數列表前兩位是一致的) 就能夠採用 apply , 若是個人Animal的參數列表是這樣的(age,name),而Cat的參數列表是(name,age,kind),這樣就能夠用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,kind));code

  • apply的一些其餘巧妙用法
    經過以上示例能夠看出apply能夠講一個數組默默的解析成一個一個的參數,能夠將一個數組默認的轉換爲一個參數列表([param1,param2,param3] 轉換爲 param1,param2,param3) ,利用aplly這個特色咱們就能夠用在一些針對字符串操做的方法了:例如
    a) Math.max 能夠實現獲得數組中最大的一項

    由於Math.max 參數裏面不支持Math.max([param1,param2]) 也就是數組
      可是它支持Math.max(param1,param2,param3…),因此能夠根據剛纔apply的那個特色來解決                                          
       var max=Math.max.apply(null,array),這樣輕易的能夠獲得一個數組中最大的一項  (apply會將一個數組裝換爲一個參數接一個參數的傳遞給方法)    這塊在調用的時候第一個參數給了一個null,這個是由於沒有對象去調用這個方法,我只須要用這個方法幫我運算,獲得返回的結果就行,.因此直接傳遞了一個null過去(利用Math方法可是不改變this的指向)

    b) Math.max 能夠實現獲得數組中最大的一項
    和 max是一個原理 var min=Math.min.apply(null,array);
    c) Array.prototype.push 能夠實現兩個數組合並

var arr1=new Array("1","2","3");

var arr2=new Array("4","5","6");

Array.prototype.push.apply(arr1,arr2);

**

一般在什麼狀況下,可使用apply相似Math.min等之類的特殊用法:

**
通常在目標函數只須要n個參數列表,而不接收一個數組的形式([param1[,param2[,…[,paramN]]]]),能夠經過apply的方式巧妙地解決這個問題!
末尾略微提一下bind方法是ES5新出的,它主要是綁定函數內部的this,示例

window.color = "red";
var o = { color: "blue" };
function sayColor(){

alert(this.color);

}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
//講this綁定在o對象上,因此sayColor裏面的this.color就指向哦,即便全局調用ojectSayColor依舊輸出blue
支持bind()方法的瀏覽器有 IE9+、Firefox 4+、Safari 5.1+、Opera 12+、 Chrome

總結,這個必定要多敲代碼,理解,目前個人理解是aplly,call都是調用別人的方法而且講方法裏面的this改變,二者傳參數不一樣,正由於傳參數不一樣,因此能夠用aplly用在一些目標函數只須要接受n個參數列表,而不接受數組的函數裏面,文章中部份內容參考自http://www.cnblogs.com/xiaoho...,也添加了本身的理解,不對之處還望各位多多指正

相關文章
相關標籤/搜索