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 相关文章推荐
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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 获取mysql数据库信息代码
2009/03/12 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python查看模块,对象的函数方法
2018/10/16 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
django修改models重建数据库的操作
2020/03/31 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
python 利用toapi库自动生成api
2020/10/19 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
啤酒销售实习自我鉴定
2013/09/24 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS