JS call()及apply()方法使用实例汇总


Posted in Javascript onJuly 11, 2020

最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧。

每个函数都包含两个非继承而来的方法:call()方法和apply()方法。

相同点:这两个方法的作用是一样的。

都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。

一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。

call()方法使用示例:

//例1
  <script>
    window.color = 'red';
    document.color = 'yellow';

    var s1 = {color: 'blue' };
    function changeColor(){
      console.log(this.color);
    }

    changeColor.call();     //red (默认传递参数)
    changeColor.call(window);  //red
    changeColor.call(document); //yellow
    changeColor.call(this);   //red
    changeColor.call(s1);    //blue

  </script>

  //例2
  var Pet = {
    words : '...',
    speak : function (say) {
      console.log(say + ''+ this.words)
    }
  }
  Pet.speak('Speak'); // 结果:Speak...

  var Dog = {
    words:'Wang'
  }

  //将this的指向改变成了Dog
  Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang

apply()方法使用示例:

//例1
  <script>
    window.number = 'one';
    document.number = 'two';

    var s1 = {number: 'three' };
    function changeColor(){
      console.log(this.number);
    }

    changeColor.apply();     //one (默认传参)
    changeColor.apply(window);  //one
    changeColor.apply(document); //two
    changeColor.apply(this);   //one
    changeColor.apply(s1);    //three

  </script>

  //例2
  function Pet(words){
    this.words = words;
    this.speak = function () {
      console.log( this.words)
    }
  }
  function Dog(words){
    //Pet.call(this, words); //结果: Wang
    Pet.apply(this, arguments); //结果: Wang
  }
  var dog = new Dog('Wang');
  dog.speak();

不同点:接收参数的方式不同。

apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。

说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个
TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。

call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。
语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。

说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。

使用示例1:

function add(c,d){
    return this.a + this.b + c + d;
  }

  var s = {a:1, b:2};
  console.log(add.call(s,3,4)); // 1+2+3+4 = 10
  console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14

使用示例2:

<script>
    window.firstName = "Cynthia"; 
    window.lastName = "_xie";

    var myObject = {firstName:'my', lastName:'Object'};

    function getName(){
      console.log(this.firstName + this.lastName);
    }

    function getMessage(sex,age){
      console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
    }

    getName.call(window); // Cynthia_xie
    getName.call(myObject); // myObject

    getName.apply(window); // Cynthia_xie
    getName.apply(myObject);// myObject

    getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
    getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21

    getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
    getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
js继承实现方法详解
Dec 16 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 #Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 #Javascript
VSCode 配置uni-app的方法
Jul 11 #Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 #Javascript
You might like
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python实现汉诺塔算法
2021/03/01 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
拓展策划方案
2014/06/03 职场文书
大二学年个人总结
2015/03/03 职场文书
八月迷情观后感
2015/06/11 职场文书
领导欢送会主持词
2015/07/06 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis