zoukankan      html  css  js  c++  java
  • call()&apply()

    此文摘自蚂蚁部落大佬文章

    call方法可以改变其他方法(函数)的调用对象,方法内的this也会指向新的调用对象。

    此方法与apply方法功能类似,具体参阅JavaScript apply()一章节。

    特别说明:apply对箭头函数无效。

    语法结构:

    [JavaScript] 纯文本查看 复制代码
    1
    fn.call(thisobj,arg1,arg2,...)

    参数解析:

    (1).fn:要被改变调用对象的方法或者函数。

    (2).thisobj:必需,fn的新调用对象,fn中的this将会指向此对象。

    (3).arg:可选,传递给fn的参数。

    浏览器支持:

    (1).IE浏览器支持此方法。

    (2).edge浏览器支持此方法。

    (3).谷歌浏览器支持此方法。

    (4).opera浏览器支持此方法。

    (5).火狐浏览器支持此方法。

    (6).safria浏览器支持此方法。

    代码实例:

    [JavaScript] 纯文本查看 复制代码运行代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj={
      webName:"蚂蚁部落"
    }
    var webName="baidu";
    function fn(){
      console.log(this.webName);
    }
    fn();
    fn.call(obj)

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201811/12/110052mmqzstz2wwcf3hn3.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    代码分析如下:

    (1).默认状态下,调用fn函数,函数中的this指向window对象,所以打印结果为"baidu"。

    (2).通过call方法将fn的调用对象修改obj,那么fn中的this也就指向obj,于是打印结果为"蚂蚁部落"。

    [JavaScript] 纯文本查看 复制代码运行代码
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
      webName:"蚂蚁部落"
    }
    function fn(x,y){
      console.log(this.webName);
      console.log(x + y)
    }
    fn.call(obj, 2, 3);

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201811/12/110122jllc5lqnlb4c3g53.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    代码分析如下:

    (1).通过call方法将fn函数的调用对象修改obj,那么fn中this指向obj。

    (2).call方法从第二个参数开始的所有参数都是为fn传递的参数,也就是将参数2和3传递给fn。

    apply可以修改指定函数的调用对象,函数中的this也会指向新的调用对象。

    恰当的使用apply可以让繁琐的操作变得更为简单。

    特别说明:apply对箭头函数无效。

    语法结构:

    [JavaScript] 纯文本查看 复制代码
    1
    function.apply(newObj[, argsArray])

    参数解析:

    (1).function:此函数的调用对象将被修改。

    (2).newObj:必需,函数的新调用对象。

    (3).argsArray:必需,传递给function函数的参数,数组或者arguments对象。

    一.代码实例:

    [JavaScript] 纯文本查看 复制代码运行代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    let antzone={
        webName:"蚂蚁部落",
        show:function(){
            console.log(this.webName);
        }
    }
    let baidu={
        webName:"百度",
        show:function(){
            console.log(this.webName);
        }
    }
    antzone.show();
    antzone.show.apply(baidu);

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201810/15/231410rr2t2jodgojvqpon.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    代码分析如下:

    (1).antzone调用show方法,无疑this是指向antzone,打印结果自然是"蚂蚁部落"。

    (2).antzone.show.apply,apply可以将show调用对象由antzone修改为baidu。

    (3).被修改之后,show中的this指向新对象baidu,那么打印结果也就变成"百度"。

    再来看一段代码实例:

    [JavaScript] 纯文本查看 复制代码运行代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    function A(){
      this.url="http://www.softwhy.com";
    }
    function B(age,address){
      this.age=age;
      this.address=address;
      console.log(this.age);
      console.log(this.address);
      console.log(this.url);
    }
    let oa=new A();
    B.apply(oa,["age","青岛市南区"]);

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201810/15/231440u5rgi9gdl852ulcx.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    代码分析如下:

    (1).创建构造函数A的一个对象实例oa。

    (2).通过apply方法将B函数的调用对象修改为oa。

    (3).修改之后,B函数中的this指向对象oa。

    (4).最后给apply传递第二个参数,具有两个元素的数组,那么B接收数组中的两个元素作为参数。

    二.实际应用:

    获取数字数组中的最大值和最小值的方式有很多,比如自己写代码挨个遍历比较。

    比较方便的方式是利用Math.max和Math.min方法实现。

    代码实例如下:

    [JavaScript] 纯文本查看 复制代码运行代码
    1
    2
    3
    let arr = [7,3,4,6,10];
    console.log(Math.max.apply(Math,arr));
    console.log(Math.min.apply(Math,arr));

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201810/15/231540llor7skl66kz4ysl.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    Math.max和Math.min方法可以接收多个数字以比较它们之间的大小。

    可以通过apply方法以数组形式传递参数,非常简洁的实现了预期效果。

    [JavaScript] 纯文本查看 复制代码运行代码
    1
    2
    3
    4
    let a = [1,2,3];
    let b = [3,4];
    Array.prototype.push.apply(a, b);
    console.log(a);

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201810/15/231615y9yddde0tqtvd9ys.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    利用apply可以很方便的实现了数组的合并效果。

    由于ES2015的出现,还有比上面更加方便的合并数组的方式。

    代码实例如下:

    [JavaScript] 纯文本查看 复制代码运行代码
    1
    2
    let arr=[4,5];
    console.log([1,2,3,...arr]);

    代码运行效果截图如下:

    a:3:{s:3:"pic";s:43:"portal/201810/15/231644r1vupp1lfpzn9trm.png";s:5:"thumb";s:0:"";s:6:"remote";N;}

    使用展开运算符使数组合并数组更加方便。

  • 相关阅读:
    Linux下安装FTP服务(Ubuntu)
    Ubuntu下无法使用Secure_CRT连接服务器
    Mysql 锁机制
    PHP提取HTML代码中img标签下src属性
    Mysql 隐式转换
    PHPExcel在TP下使用
    ThinkPHP同时操作多个数据库
    PHP 时间相关操作
    ThinkPHP输入验证和I方法使用
    ThinkPHP模板内使用U方法
  • 原文地址:https://www.cnblogs.com/lujunan/p/10191897.html
Copyright © 2011-2022 走看看