call和apply方法

時間  2019-11-12
標籤 apply 方法 简体版
原文   原文鏈接

普通函數中是否也有this關鍵字，this指向誰呢？javascript

<script type="text/javascript">
     function myfun(){
        console.log(this);
     }
     myfun();
</script>

控制函數內部的this指向：css

函數均可以打點調用call()和apply()方法，能夠幫咱們制定函數內部的this指向，在函數調用過程使用這兩個方法。html

 

var oDiv = document.getElementsByTagName('div');
function fun(){
   console.log(this);
}
//fun.call(oDiv);
fun.apply(oDiv);

 

做用：java

 1、執行fun函數編程

2、在fun函數內部指定this的指向oDiv數組

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script type="text/javascript">
/*function fun(){
console.log(this);
}
fun();*/
var oDiv = document.getElementsByTagName('div')[0];
/* function fun(){
console.log(this);
}
//fun.call(oDiv);
fun.apply(oDiv);*/app

/*function sum(a,b){
this.style.backgroundColor = "pink";
}
sum.call(oDiv);
sum.apply(oDiv);*/函數

function sum(a,b){
this.style.backgroundColor = "pink";
console.log(a+b);
}
sum.call(oDiv,2,3);
sum.apply(oDiv,[3,5]);
</script>學習

 

call和apply 區別：測試

函數傳遞參數的語法不一樣。

sum.call(oDiv,參數1,參數2,參數3...);
sum.apply(oDiv,[參數1,參數2,參數3...])

 

  1. 1.apply和call的區別在哪裏  
  2.   
  3. 2.什麼狀況下用apply,什麼狀況下用call  
  4.   
  5. 3.apply的其餘巧妙用法（通常在什麼狀況下可使用apply）  
  6.   
  7. 我首先從網上查到關於apply和call的定義,而後用示例來解釋這兩個方法的意思和如何去用.  
  8.   
  9.          apply:方法能劫持另一個對象的方法，繼承另一個對象的屬性.  
  10.   
  11.  Function.apply(obj,args)方法能接收兩個參數  
  12. obj：這個對象將代替Function類裏this對象  
  13. args：這個是數組，它將做爲參數傳給Function（args-->arguments）  
  14.   
  15.          call:和apply的意思同樣,只不過是參數列表不同.  
  16.   
  17.  Function.call(obj,[param1[,param2[,…[,paramN]]]])  
  18. obj：這個對象將代替Function類裏this對象  
  19. params：這個是一個參數列表  
  20.   
  21. 1.apply示例:  
  22.   
  23. <script type="text/javascript">   
  24. /*定義一我的類*/   
  25. function Person(name,age) {   
  26.     this.name=name; this.age=age;   
  27. }   
  28.  /*定義一個學生類*/   
  29. functionStudent(name,age,grade) {   
  30.     Person.apply(this,arguments); this.grade=grade;   
  31. }   
  32. //建立一個學生類   
  33. var student=new Student("qian",21,"一年級");   
  34. //測試   
  35. alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);   
  36. //你們能夠看到測試結果name:qian age:21 grade:一年級   
  37. //學生類裏面我沒有給name和age屬性賦值啊,爲何又存在這兩個屬性的值呢,這個就是apply的神奇之處.   
  38. </script>   
  39.   
  40. 分析: Person.apply(this,arguments);  
  41.   
  42. this:在建立對象在這個時候表明的是student  
  43.   
  44. arguments:是一個數組,也就是[「qian」,」21」,」一年級」];  
  45.   
  46. 也就是通俗一點講就是:用student去執行Person這個類裏面的內容,在Person這個類裏面存在this.name等之類的語句,這樣就將屬性建立到了student對象裏面  
  47.   
  48.    
  49.   
  50. 2.call示例  
  51.   
  52. 在Studen函數裏面能夠將apply中修改爲以下:  
  53.   
  54. Person.call(this,name,age);  
  55.   
  56. 這樣就ok了  
  57.   
  58. 3.什麼狀況下用apply,什麼狀況下用call  
  59.   
  60. 在給對象參數的狀況下,若是參數的形式是數組的時候,好比apply示例裏面傳遞了參數arguments,這個參數是數組類型,而且在調用Person的時候參數的列表是對應一致的(也就是Person和Student的參數列表前兩位是一致的) 就能夠採用 apply , 若是個人Person的參數列表是這樣的(age,name),而Student的參數列表是(name,age,grade),這樣就能夠用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,grade));  
  61.   
  62. 4.apply的一些其餘巧妙用法  
  63.   
  64. 細心的人可能已經察覺到,在我調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合,   
  65.   
  66. 在調用Person的時候,他須要的不是一個數組,可是爲何他給我一個數組我仍然能夠將數組解析爲一個一個的參數,  
  67.   
  68. 這個就是apply的一個巧妙的用處,能夠將一個數組默認的轉換爲一個參數列表([param1,param2,param3] 轉換爲 param1,param2,param3) 這個若是讓咱們用程序來實現將數組的每個項,來裝換爲參數的列表,可能都得費一會功夫,藉助apply的這點特性,因此就有了如下高效率的方法:  
  69.   
  70.    
  71.   
  72. a)Math.max 能夠實現獲得數組中最大的一項  
  73.   
  74. 由於Math.max 參數裏面不支持Math.max([param1,param2]) 也就是數組  
  75.   
  76. 可是它支持Math.max(param1,param2,param3…),因此能夠根據剛纔apply的那個特色來解決 var max=Math.max.apply(null,array),這樣輕易的能夠獲得一個數組中最大的一項  
  77.   
  78. (apply會將一個數組裝換爲一個參數接一個參數的傳遞給方法)  
  79.   
  80.          這塊在調用的時候第一個參數給了一個null,這個是由於沒有對象去調用這個方法,我只須要用這個方法幫我運算,獲得返回的結果就行,.因此直接傳遞了一個null過去  
  81.   
  82. b)Math.min  能夠實現獲得數組中最小的一項  
  83.   
  84. 一樣和 max是一個思想 var min=Math.min.apply(null,array);  
  85.   
  86. c)Array.prototype.push 能夠實現兩個數組合並  
  87.   
  88. 一樣push方法沒有提供push一個數組,可是它提供了push(param1,param,…paramN) 因此一樣也能夠經過apply來裝換一下這個數組,即:  
  89.   
  90. vararr1=new Array("1","2","3");   
  91.  vararr2=new Array("4","5","6");   
  92. Array.prototype.push.apply(arr1,arr2);   
  93.   
  94. 也能夠這樣理解,arr1調用了push方法,參數是經過apply將數組裝換爲參數列表的集合.  
  95.   
  96. 一般在什麼狀況下,可使用apply相似Math.min等之類的特殊用法:  
  97.   
  98. 通常在目標函數只須要n個參數列表,而不接收一個數組的形式（[param1[,param2[,…[,paramN]]]]）,能夠經過apply的方式巧妙地解決這個問題!  
  99.   
  100.   
  101. 5.總結:  
  102.   
  103. 一開始我對apply 很是的不懂,最後多看了幾遍,本身多敲了幾遍代碼,才明白了中間的道理,因此,無論作什麼事情,只要本身肯動腦子,肯動手敲代碼,這樣一個技術就會掌握…     
  104.   
  105. 還有好比第四部分得內容,巧妙的解決了實實在在存在的問題,這個確定不是一個初學者能想到的解決方案(這個也不是我本身想的),沒有對編程有必定認識的不會想到這個的,仍是一句話,多積累,多學習,提高本身的能力和對編程思想的理解能力纔是最關鍵!  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程