js中apply()和call()的区别与用法实例分析


Posted in Javascript onAugust 14, 2018

本文实例讲述了js中apply()和call()的区别与用法。分享给大家供大家参考,具体如下:

每个函数都包括两个非继承而来的方法:apply()call()。两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值。

两者区别仅在于接收参数方式不同,apply()第一个参数是调用apply的函数运行的作用域,的第二个参数可以是Array的实例(数组),也可以是arguments对象,call()第一个参数是this的值没有变化,而其余参数都直接传递给函数(也就是逐个列举出来)。

如果要传入的是数组或arguments对象,apply会更方便。

可以看到apply()call()可以传递参数。更有用的是,两者还可以扩充函数运行的作用域:

var obj = {color:'red'};
window.color = 'blue';
function getcolor(){
  console.log(this.color)
};
getcolor.apply(obj);    //red
getcolor.apply(window);  //blue
getcolor.apply(this);   //blue

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果如下:

js中apply()和call()的区别与用法实例分析

一个重要的用法:

var values = [1,2,3,4,5,4,3,2,1];
var max = Math.max.apply(Math,values);
console.log(max);     //5

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果如下:

js中apply()和call()的区别与用法实例分析

这个实际上是利用apply()接收数组,方便了传参。而apply的第一个参数改为null或者空字符串均可。

此外还有bind()方法会创建一个函数的实例,其this值指向传给bind()的值:

window.color = 'red';
var o = {color:'blue'};
function sayColor(){
 console.log(this.color)
};
var objSayColor = sayColor.bind(o);
objSayColor();       //blue

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果如下:

js中apply()和call()的区别与用法实例分析

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
jquery validation验证表单插件
Jan 07 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JS通过位运算实现权限加解密
Aug 14 #Javascript
js中getter和setter用法实例分析
Aug 14 #Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 #Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 #Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Bootstrap表单布局
2016/07/19 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
护士自荐信怎么写
2013/10/18 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
母婴店促销方案
2014/03/05 职场文书
建材投资建议书
2014/05/16 职场文书
大学生自荐书范文
2015/03/05 职场文书