浅谈javascript中的apply及apply与call和bind区别

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

上述运行结果

Paste_Image.png

由此可以看出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,原因是:

Paste_Image.png

用法举例四:


<!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]) 同样成立。

Paste_Image.png
(二)与call()的区别

其与call几乎完全相同,唯一区别在于语法上:

Paste_Image.png

也就是call( 第一个参数,第二个参数),call的第二个参数是一个参数列表,而不是数组或者类数组对象,其实上面的例子中的 Person.apply(this,[name,age])
可改成 Person.call(this,name,age) 也是一样的。

Paste_Image.png

注:如果apply的第二个参数不是数组或者类数组对象就会报Uncaught TypeError: CreateListFromArrayLike called on non-object 错误!!!

Paste_Image.png
(三)与bind()的区别

提到了apply和call,那必然还要提到bind。其实call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此需要执行该函数时后面还需要()来进行调用才可以。对于bind,如果有参数需要传入的话有两种写法,一种是像call那样传参(比如Person.bind(this,name,age)() ),另一种是Person.bind(this)(name,age)。

四、apply()的常见巧妙用法

(一)、寻找一个数组中的最大或最小值

我们知道Math.max()或者Math.min()可以寻找最大或最小值,但是()里不支持数组(见下图)

Paste_Image.png

当然也许我们会想到以下方法:

    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结果如下;

Paste_Image.png

因此我们需要采用函数的方法:

    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实例解析

**本文版权归本人即简书笔名:该账户已被查封 所有,如需转载请注明出处。谢谢! *

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容