淺談javascript中的apply及apply與call和bind區(qū)別

一、apply()的作用

它的作用是在指定this值和參數(shù)(參數(shù)以數(shù)組或類數(shù)組對(duì)象的形式存在)的情況下調(diào)用某個(gè)函數(shù)。其實(shí)說(shuō)白了用它可以綁定一個(gè)函數(shù)然后在另一個(gè)環(huán)境中(比如另一個(gè)函數(shù)中)使用新環(huán)境給的參數(shù)(指定this值、參數(shù))進(jìn)行運(yùn)算;

二、apply()的語(yǔ)法及與call()的區(qū)別

(一)、apply()的用法如下: fun.apply(thisArg,[argsArray])
  • thisArg
    括號(hào)里的thisArg表示在fun函數(shù)運(yùn)行時(shí)指定的this值。需要注意的是指定的this值并不是該函數(shù)執(zhí)行時(shí)真正的this值,若這個(gè)函數(shù)處于非嚴(yán)格模式下,則當(dāng)thisArg為null或者undefined時(shí),則會(huì)指向全局對(duì)象(在瀏覽器中也就是window),同時(shí)值為原始值(字符串 、數(shù)值、布爾值 )的this會(huì)指向該原始值的自動(dòng)包裝對(duì)象。

  • argsArray
    括號(hào)中的argsArray表示一個(gè)數(shù)值或者類數(shù)組對(duì)象,其中的數(shù)組元素將作為單獨(dú)的參數(shù)傳給fun函數(shù),如果該參數(shù)的值為null或者undefined時(shí),則表示不需要傳遞任何參數(shù)。

  • 注意apply前面是將要調(diào)用的函數(shù)名而不是函數(shù)?。。?/p>

用法舉例一:

    function sum(a,b) {
        return a+b;
    }

    function add(x,y) {
        return sum.apply(this,[x,y])
    }
    
    console.log(add(2,5))

上述運(yùn)行結(jié)果將是7.很明顯我們并未直接在add函數(shù)中定義它的結(jié)果是返回它的兩個(gè)形參之和,而是通過(guò)在add的環(huán)境下(指定了this值及2,5參數(shù))調(diào)用sum函數(shù)來(lái)進(jìn)行運(yùn)算。

用法舉例二:

    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);

上述運(yùn)行結(jié)果

Paste_Image.png

由此可以看出apply可以改變或者說(shuō)擴(kuò)展函數(shù)的作用域。

用法舉例三:

<!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>

運(yùn)行結(jié)果

people ("zhang","F") 這句的運(yùn)行結(jié)果中age是25,原因是函數(shù)里面無(wú)age值,只能去外面找,而外面聲明了變量 var age=25;因此為25;
但是people.apply(licai,["xiaolizi","girl"]) 這句的運(yùn)行結(jié)果中age是24,原因是:

Paste_Image.png

用法舉例四:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    /*定義一個(gè)人的基本信息*/
    function Person(name,age) {
        this.name=name; this.age=age;
    }
    /*定義一個(gè)人的更多信息*/
    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]) 同樣成立。

Paste_Image.png
(二)與call()的區(qū)別

其與call幾乎完全相同,唯一區(qū)別在于語(yǔ)法上:

Paste_Image.png

也就是call( 第一個(gè)參數(shù),第二個(gè)參數(shù)),call的第二個(gè)參數(shù)是一個(gè)參數(shù)列表,而不是數(shù)組或者類數(shù)組對(duì)象,其實(shí)上面的例子中的 Person.apply(this,[name,age])
可改成 Person.call(this,name,age) 也是一樣的。

Paste_Image.png

注:如果apply的第二個(gè)參數(shù)不是數(shù)組或者類數(shù)組對(duì)象就會(huì)報(bào)Uncaught TypeError: CreateListFromArrayLike called on non-object 錯(cuò)誤?。?!

Paste_Image.png
(三)與bind()的區(qū)別

提到了apply和call,那必然還要提到bind。其實(shí)call和apply都是對(duì)函數(shù)的直接調(diào)用,而bind方法返回的仍然是一個(gè)函數(shù),因此需要執(zhí)行該函數(shù)時(shí)后面還需要()來(lái)進(jìn)行調(diào)用才可以。對(duì)于bind,如果有參數(shù)需要傳入的話有兩種寫法,一種是像call那樣傳參(比如Person.bind(this,name,age)() ),另一種是Person.bind(this)(name,age)。

四、apply()的常見(jiàn)巧妙用法

(一)、尋找一個(gè)數(shù)組中的最大或最小值

我們知道Math.max()或者M(jìn)ath.min()可以尋找最大或最小值,但是()里不支持?jǐn)?shù)組(見(jiàn)下圖)

Paste_Image.png

當(dāng)然也許我們會(huì)想到以下方法:

    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
    }

其實(shí)使用apply就非常簡(jiǎn)單高效了:

    function getMin3(arr) {
       return  Math.min.apply(null,arr)
    }
(二)、將一個(gè)數(shù)組push到另一個(gè)數(shù)組中

我們不能直接arr1.push(arr2),這樣的push結(jié)果如下;

Paste_Image.png

因此我們需要采用函數(shù)的方法:

    function pushArr(arr1,arr2) {
        for (var i=0;i<arr2.length;i++){
            arr1.push(arr2[i])
        }
//        console.log(arr1);
        return arr1
    }

其實(shí)使用apply方法能夠更簡(jiǎn)單高效的完成:

    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

相關(guān)練習(xí):this、call、apply實(shí)例解析

**本文版權(quán)歸本人即簡(jiǎn)書筆名:該賬戶已被查封 所有,如需轉(zhuǎn)載請(qǐng)注明出處。謝謝! *

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容