JavaScript中的apply()方法和call()方法使用介绍


Posted in Javascript onJuly 25, 2012

1、每个函数都包含两个非继承而来的方法:apply()和call()。
2、他们的用途相同,都是在特定的作用域中调用函数。
3、接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。

例1:

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName.call(window); //huo .call(this); 
HelloName.call(myObject);

运行结果为:
Hello diz song glad to meet you!
Hello my Object glad to meet you!

例2:

function sum(num1, num2) { 
return num1 + num2; 
} 
console.log(sum.call(window, 10, 10)); //20 
console.log(sum.apply(window,[10,20])); //30

分析:在例1中,我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域,如果我们想用传统的方法实现,请见下面的代码:

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName(); //Hello diz song glad to meet you! 
myObject.HelloName = HelloName; 
myObject.HelloName(); //Hello my Object glad to meet you!

见加红的代码,我们发现,要想让HelloName()函数的作用域在对象myObject上,我们需要动态创建myObject的HelloName属性,此属性作为指针指向HelloName()函数,这样,当我们调用myObject.HelloName()时,函数内部的this变量就指向myObjecct,也就可以调用该对象的内部其他公共属性了。

通过分析例2,我们可以看到call()和apply()函数的真正运用之处,在实际项目中,还需要根据实际灵活加以处理!

一个小问题:再看一看函数中定义函数时,this变量的情况

function temp1() { 
console.log(this); //Object {} 
function temp2() { 
console.log(this); //Window 
} 
temp2(); 
} 
var Obj = {}; 
temp1.call(Obj); //运行结果见上面绿色的注释!!!!

执行结果与下面的相同:

function temp1() { 
console.log(this); 
temp2(); 
} 
function temp2() { 
console.log(this); 
} 
var Obj = {}; 
temp1.call(Obj);

4、bind()方法

支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是属于ECMAScript5的方法。直接看例子:

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
alert(this.color); 
} 
var OSayColor = sayColor.bind(o); 
OSayColor(); //blue

这里,sayColor()调用bind()方法,并传入o对象,返回了OSayColor()函数,在OSayColor()中,this的值就为o对象。

Javascript 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
javascript相关事件的几个概念
May 21 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
JS如何生成动态列表
Sep 22 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 #Javascript
原生js 秒表实现代码
Jul 24 #Javascript
javascript设计模式 接口介绍
Jul 24 #Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 #Javascript
js+xml生成级联下拉框代码
Jul 24 #Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 #Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 #Javascript
You might like
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
儿童学习python的一些小技巧
2018/05/27 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
nohup的用法
2012/11/26 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
维稳工作承诺书
2015/01/20 职场文书
上甘岭观后感
2015/06/10 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
React列表栏及购物车组件使用详解
2021/06/28 Javascript