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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue实现评论列表功能
Oct 25 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
用session做客户验证时的注意事项
2006/10/09 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
详细分析python3的reduce函数
2017/12/05 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
导致python中import错误的原因是什么
2020/07/01 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
汽修专业自荐信
2014/07/07 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
管理失职检讨书
2015/05/05 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
python中 .npy文件的读写操作实例
2022/04/14 Python