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 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue 实现把路由单独分离出来
Aug 13 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
jQuery 源码分析笔记
2011/05/25 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
javascript 播放器 控制
2007/01/22 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python实现随机漫步功能
2018/07/09 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python打包多类型文件的操作方法
2020/09/21 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
How TDD works
2012/09/30 面试题
校长就职演讲稿
2014/01/06 职场文书
护士毕业实习感言
2014/03/05 职场文书
相亲大会策划方案
2014/06/05 职场文书
涨价通知怎么写
2015/04/23 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
redis缓存存储Session原理机制
2021/11/20 Redis
小程序实现侧滑删除功能
2022/06/25 Javascript
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers