一、apply()的作用
它的作用是在指定this值和參數(參數以數組或類數組對象的形式存在)的情況下調用某個函數。其實說白了用它可以綁定一個函數然后在另一個環境中(比如另一個函數中)使用新環境給的參數(指定this值、參數)進行運算;
二、apply()的語法及與call()的區別
(一)、apply()的用法如下: fun.apply(thisArg,[argsArray])
thisArg
括號里的thisArg表示在fun函數運行時指定的this值。需要注意的是指定的this值并不是該函數執行時真正的this值,若這個函數處于非嚴格模式下,則當thisArg為null或者undefined時,則會指向全局對象(在瀏覽器中也就是window),同時值為原始值(字符串 、數值、布爾值 )的this會指向該原始值的自動包裝對象。argsArray
括號中的argsArray表示一個數值或者類數組對象,其中的數組元素將作為單獨的參數傳給fun函數,如果該參數的值為null或者undefined時,則表示不需要傳遞任何參數。注意apply前面是將要調用的函數名而不是函數!!!
用法舉例一:
function sum(a,b) {
return a+b;
}
function add(x,y) {
return sum.apply(this,[x,y])
}
console.log(add(2,5))
上述運行結果將是7.很明顯我們并未直接在add函數中定義它的結果是返回它的兩個形參之和,而是通過在add的環境下(指定了this值及2,5參數)調用sum函數來進行運算。
用法舉例二:
var jubuColor={"color":"yellow"};
quanjuColor={"color":"red"};
window.color="green";
function showColor() {
console.log(this.color);
}
showColor.apply(jubuColor);
showColor.apply(quanjuColor);
showColor.apply(window);
showColor.apply(this);
上述運行結果
由此可以看出apply可以改變或者說擴展函數的作用域。
用法舉例三:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>apply</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<script>
var age=25;
function people (name,sex) {
console.log(name+" "+sex+" "+this.age);
}
var licai={"sex":"M","age":"24"};
people ("zhang","F");
people.apply(licai,["xiaolizi","girl"]);
</script>
</body>
</html>
people ("zhang","F")
這句的運行結果中age是25,原因是函數里面無age值,只能去外面找,而外面聲明了變量 var age=25;因此為25;
但是people.apply(licai,["xiaolizi","girl"])
這句的運行結果中age是24,原因是:
用法舉例四:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*定義一個人的基本信息*/
function Person(name,age) {
this.name=name; this.age=age;
}
/*定義一個人的更多信息*/
function personMoreInfo(name,age,sex) {
Person.apply(this,arguments);
this.sex=sex;
}
var coder =new personMoreInfo("licai","25","M");
console.log("他的名字是"+ coder.name+" "+"他的年齡是"+coder.age+" "+ "他的性別是"+coder.sex )
</script>
上述的Person.apply(this,arguments)
改寫成 Person.apply(this,[name,age])
同樣成立。
(二)與call()的區別
其與call幾乎完全相同,唯一區別在于語法上:
也就是call( 第一個參數,第二個參數),call的第二個參數是一個參數列表,而不是數組或者類數組對象,其實上面的例子中的 Person.apply(this,[name,age])
可改成 Person.call(this,name,age)
也是一樣的。
注:如果apply的第二個參數不是數組或者類數組對象就會報Uncaught TypeError: CreateListFromArrayLike called on non-object 錯誤!!!
(三)與bind()的區別
提到了apply和call,那必然還要提到bind。其實call和apply都是對函數的直接調用,而bind方法返回的仍然是一個函數,因此需要執行該函數時后面還需要()來進行調用才可以。對于bind,如果有參數需要傳入的話有兩種寫法,一種是像call那樣傳參(比如Person.bind(this,name,age)() ),另一種是Person.bind(this)(name,age)。
四、apply()的常見巧妙用法
(一)、尋找一個數組中的最大或最小值
我們知道Math.max()或者Math.min()可以尋找最大或最小值,但是()里不支持數組(見下圖)
當然也許我們會想到以下方法:
function getMin1(arr) {
var minArr=arr[0];
for (var i=0;i<arr.length;i++){
if (minArr>arr[i]){
minArr=arr[i]
}
}
return minArr
}
或者
function getMin2(arr) {
var minArr=arr[0];
for (var i=0;i<arr.length;i++){
minArr=Math.min(minArr,arr[i])
}
return minArr
}
其實使用apply就非常簡單高效了:
function getMin3(arr) {
return Math.min.apply(null,arr)
}
(二)、將一個數組push到另一個數組中
我們不能直接arr1.push(arr2),這樣的push結果如下;
因此我們需要采用函數的方法:
function pushArr(arr1,arr2) {
for (var i=0;i<arr2.length;i++){
arr1.push(arr2[i])
}
// console.log(arr1);
return arr1
}
其實使用apply方法能夠更簡單高效的完成:
function pushArr2(arr1,arr2) {
return Array.prototype.push.apply(arr1,arr2)
}
參考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
http://blog.csdn.net/business122/article/details/8000676
http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html
相關練習:this、call、apply實例解析
**本文版權歸本人即簡書筆名:該賬戶已被查封 所有,如需轉載請注明出處。謝謝! *