快捷導(dǎo)航

Javascript中call與apply的學(xué)習(xí)筆記

更新時(shí)間：2014年09月22日 11:39:19 投稿：hebedich

經(jīng)常看到這倆哥們，看來(lái)看去都是講他們的區(qū)別，一直沒(méi)搞太清楚作用究竟是什么，現(xiàn)在記錄下自己理解，有錯(cuò)的話希望指出！

先看MDN中對(duì)于call的解釋

call() 方法在使用一個(gè)指定的this值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或方法.

注:該方法的作用和 apply() 方法類(lèi)似，只有一個(gè)區(qū)別，就是call()方法接受的是若干個(gè)參數(shù)的列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

語(yǔ)法

fun.call(thisArg[, arg1[, arg2[, ...]]])

參數(shù)
thisArg

在fun函數(shù)運(yùn)行時(shí)指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時(shí)真正的this值，如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為null和undefined的this值會(huì)自動(dòng)指向全局對(duì)象(瀏覽器中就是window對(duì)象)，同時(shí)值為原始值(數(shù)字，字符串，布爾值)的this會(huì)指向該原始值的自動(dòng)包裝對(duì)象。

arg1, arg2, ...

指定的參數(shù)列表。

MDN上的例子一開(kāi)始并不是很好理解，這里我貼出來(lái)，有興趣可以自己去看看 call-Javascript

這里的thisArg解釋為在fun運(yùn)行時(shí)指定的this值，也就是說(shuō)使用了call后，fun中的this指向了thisArg？看代碼

 var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

第一次輸出是調(diào)用的全局變量，之后由于call和apply的使用，f2中的this指向了f1，因此，輸出變成了123，其實(shí)也就是f1借用了f2的方法輸出了自己的p

這時(shí)將f1()中的this.p刪除，會(huì)輸出三個(gè)456，也就證實(shí)了當(dāng)this為null或者undefined時(shí)其實(shí)指向了全局變量

至于指向原始值是指向它的包裝對(duì)象這里，由于我理解的包裝對(duì)象都是臨時(shí)的，而且測(cè)試時(shí)只輸出了原始值的類(lèi)型而不是object，這里如何證明如果有知道的朋友希望可以和我討論下，謝謝！

既然call可以實(shí)現(xiàn)一個(gè)對(duì)象借用另一個(gè)對(duì)象，不就可以實(shí)現(xiàn)繼承了么？看代碼

 function f1(){ 
  this.father="father"
 } 
 function f2() { 
  f1.call(this); 
  this.child="child"; 
 } var test=new f2(); 
console.log(test.father);  //father

test中是沒(méi)有father的，由于f2()中的

f1.call(this);

這里的this指向的就是f2，也就是f2借用了f1的方法，其實(shí)也就實(shí)現(xiàn)了繼承

下面講一下這里的參數(shù)，這里的參數(shù)是傳遞給fun的，看代碼吧

 function f1(){ 
  this.p="123"; 
 } 
 function f2(x) { 
  console.log(this.p); 
  console.log(x); 
 } 
 f2.call(f1(),456);   //123 
//456

先輸出123是因?yàn)閒1中的p，之后的456是傳遞給f2的參數(shù)，很容易理解

主要是注意call和apply中參數(shù)的區(qū)別

call是一個(gè)一個(gè)傳入的，而apply是傳入的一個(gè)數(shù)組

  function f1(){ 
  this.p="測(cè)試call"; 
 } 
 function f2(x,y,z) { 
  console.log(this.p); 
  console.log(x); 
  console.log(y); 
  console.log(z); 
 } 
   function f3(){ 
  this.p="測(cè)試apply"; 
 } 
 f2.call(f1(),4,5,6);  
 f2.call(f1(),[4,5,6]);  
 f2.apply(f3(),[4,5,6]); 
 f2.apply(f3(),4,5,6);

這里可以看到結(jié)果