JavaScript中的apply和call函数详解


Posted in Javascript onJuly 20, 2014

第一次翻译技术文章,见笑了!

翻译原文:

Function.apply and Function.call in JavaScript

第一段略。

每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象。看一下 这篇文章 ,复习一下(refresher)JavaScript特性。你可能还想知道JavaScript中函数和方法的区别。我认为“函数”和“方法”的描述,仅仅是JavaScript的习惯约定而已。函数立足于它们自己(例如:alert()),而方法是函数内部一个对象的属性(dictionary),我们通过对象来调用方法。每个JavaScript对象都有一个toString()方法,下面通过代码举例说明,在一个函数对象中,我们可以使用toString()方法。

function foo(){
 alert('x');
}
alert(foo.toString());

因为函数都是对象,它们有自己的属性和方法。我们可以把它们看作数据(data)。这篇文章,我们只关注两个函数的方法apply()以及call()。

我们从下面的代码开始:

var x = 10;
function f(){
 alert(this.x);
}
f();

我们定义了一个全局函数f()。f()通过this关键字访问变量x,但是需要注意的是,我们不能通过一个对象的实例来调用这个函数。this指向的是什么对象呢?this会指向这个全局对象。我们的变量x就是在这个全局对象中定义的。上面的代码能够正常运行,运行结果会显示一个对话框,对话框中显示10。

我们可以通过this来调用call()和apply()。正如下面的例子展示如何使用call():

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

首先调用f()将会显示10的对话框,因为this这个时候指向的是全局对象。然后我们调用f函数的call()方法,传入的参数是o,运行结果显示的是o中x属性的值15。call()方法会用它的第一个参数作为f函数的this指针。也就是说,我们会告诉运行时,f函数中的this指向的是哪个对象。

this跳转听起来有些滑稽,甚至对于C++、Java以及C#程序员来说有些反常。这些都是ECMAScript中有趣的部分。

通过call()也可以给函数传递参数:

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply()和call()类似的,只是apply()要求第二个参数必须是一个数组。这个数组会作为参数传递给目标函数。

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

apply()方法是很有用的,因为我们可以创建一个函数而不用去关心目标方法的参数。这个函数可以通过apply()的第二个数组参数来传递额外的参数给方法。

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

这样的语法有点问题。为了调用apply()方法,我们强制目标函数使用数组中的参数。幸运的是,有一个方法可以让这种语法更简单。在此之前,我们必须先介绍一个:参数标识符。

在JavaScript中,其实每个函数都有一个可变长度的参数列表。这意味着,即使一个函数只有一个参数的时候,我们也可以传递5个参数给它。下面的代码不会有错误,而且结果显示的是“H”。

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

在f()中,如果我们不想去接受其他的参数,我们可以用关键字arguments。arguments代表一个参数对象,它有一个代表长度的属性类似于数组。

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

你应该知道,严格来讲,arguments不是一个数组。arguments有一个length属性,但是没有split、push、pop方法。在前面的g()函数中,我们可以从arguments中拷贝需要的参数,组成数组,然后把这个数组传递给apply()。

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

当我们调用g(),we can pass additional arguments as parameters instead of stuffing the arguments into an array。

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
关于javascript作用域的常见面试题分享
Jun 18 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
一行命令搞定node.js 版本升级
Jul 20 #Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 #Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 #Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 #Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 #Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python如何调用php文件中的函数详解
2020/12/29 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
普通大学毕业生自荐信范文
2014/02/23 职场文书
小学毕业演讲稿
2014/04/25 职场文书
中国梦读书活动总结
2014/07/10 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL