js中的call和apply的用法(Javascript中call和apply的区别与详解)

1.Javascript中call和apply的区别与详解

每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。

听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象。看一下 这篇文章 ,复习一下(refresher)JavaScript特性。

你可能还想知道JavaScript中函数和方法的区别。我认为“函数”和“方法”的描述,仅仅是JavaScript的习惯约定而已。

函数立足于它们自己(例如:alert()),而方法是函数内部一个对象的属性(dictionary),我们通过对象来调用方法。每个JavaScript对象都有一个toString()方法,下面通过代码举例说明,在一个函数对象中,我们可以使用toString()方法。

?1234function foo(){alert('x');}alert(foo.toString());因为函数都是对象,它们有自己的属性和方法。我们可以把它们看作数据(data)。

这篇文章,我们只关注两个函数的方法apply()以及call()。我们从下面的代码开始:?12345var x = 10;function f(){alert(this.x);}f();我们定义了一个全局函数f()。

f()通过this关键字访问变量x,但是需要注意的是,我们不能通过一个对象的实例来调用这个函数。this指向的是什么对象呢?this会指向这个全局对象。

我们的变量x就是在这个全局对象中定义的。上面的代码能够正常运行,运行结果会显示一个对话框,对话框中显示10。

我们可以通过this来调用call()和apply()。正如下面的例子展示如何使用call():?1234567var 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()也可以给函数传递参数:?1234567var x = 10;var o = { x : 15};function f(){alert(this.x);}f();f.call(o);apply()和call()类似的,只是apply()要求第二个参数必须是一个数组。

这个数组会作为参数传递给目标函数。?12345678var 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()的第二个数组参数来传递额外的参数给方法。?123456789101112var 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”。

?1234function f(message) {alert(message);}f('H', 'e', 'l', 'l', 'o');在f()中,如果我们不想去接受其他的参数,我们可以用关键字arguments。arguments代表一个参数对象,它有一个代表长度的属性类似于数组。

?123456789function 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()。? o = {x : 15};function f(message1, message2) {alert(message1 + ( this.x * this.x) + message2);}function g(object, func) {// arguments[0] = object// 。

2.Js中call和apply的区别和用法

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。

先来看看JS手册中对call的解释:call 方法 调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。

将被用作当前对象的对象。arg1, arg2, , argN可选项。

将被传递方法参数序列。说明call 方法可以用来代替另一个对象调用一个方法。

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。

运行如下代码:可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

3.JS中 call和apply的区别和作用

Javascript的每个Function对象中有一个apply方法:

function.apply([thisObj[,argArray]])

还有一个类似功能的call方法:

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])

它们各自的定义:

apply:应用某一对象的一个方法,用另一个对象替换当前对象。

call:调用一个对象的一个方法,以另一个对象替换当前对象。

它们的共同之处:

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”

它们的不同之处:

apply:

最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数。

call:

则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

更简单地说,apply和call功能一样,只是传入的参数列表形式不同:如 func.call(func1,var1,var2,var3) 对应的apply写法为:func.apply(func1,[var1,var2,var3])

也就是说:call调用的为单个,apply调用的参数为数组

function sum(a,b){

console.log(this === window);//true

console.log(a + b);

}

sum(1,2);

sum.call(null,1,2);

sum.apply(null,[1,2]);

作用

a、调用函数

var info = 'tom';

function foo(){

//this指向window

var info = 'jerry';

console.log(this.info); //tom

console.log(this===window) //true

}

foo();

foo.call();

foo.apply();

b、call和apply可以改变函数中this的指向

var obj = {

info:'spike'

};

foo.call(obj); //这里foo函数里面的this就指向了obj

foo.apply(obj);

c、借用别的对象的方法

求数组中的最大值

var arr = [123,34,5,23,3434,23];

//方法一

var arr1 = arr.sort(function(a,b){

return b-a;

});

console.log(arr1[0]);

//方法二

var max = Math.max.apply(null,arr) //借用别的对象的方法

console.log(max);

4.关于javascript中apply和call方法的区别

apply和call作用相同,都是用于调用函数,如:

function foobar(a, b, c, d) {}

可以这样调用:

1

2

3

foobar.call(thisObj, 1, 2, 3, 4)

或者

foobar.call(thisObj, [1, 2, 3, 4])

也就是说,call和apply只有调用的时候有差异,call是将要调用函数的参数作为call的参数依次传递,而apply是将要调用函数的参数作为apply的第二个参数作为数组传递。

5.Javascript中call和apply的区别与详解

每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。

听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象。看一下 这篇文章 ,复习一下(refresher)JavaScript特性。

你可能还想知道JavaScript中函数和方法的区别。我认为“函数”和“方法”的描述,仅仅是JavaScript的习惯约定而已。

函数立足于它们自己(例如:alert()),而方法是函数内部一个对象的属性(dictionary),我们通过对象来调用方法。每个JavaScript对象都有一个toString()方法,下面通过代码举例说明,在一个函数对象中,我们可以使用toString()方法。

1234function foo(){alert('x');}alert(foo.toString());因为函数都是对象,它们有自己的属性和方法。我们可以把它们看作数据(data)。

这篇文章,我们只关注两个函数的方法apply()以及call()。我们从下面的代码开始:?12345var x = 10;function f(){alert(this.x);}f();我们定义了一个全局函数f()。

f()通过this关键字访问变量x,但是需要注意的是,我们不能通过一个对象的实例来调用这个函数。this指向的是什么对象呢?this会指向这个全局对象。

我们的变量x就是在这个全局对象中定义的。上面的代码能够正常运行,运行结果会显示一个对话框,对话框中显示10。

我们可以通过this来调用call()和apply()。正如下面的例子展示如何使用call():?1234567var 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()也可以给函数传递参数:?1234567var x = 10;var o = { x : 15};function f(){alert(this.x);}f();f.call(o);apply()和call()类似的,只是apply()要求第二个参数必须是一个数组。

这个数组会作为参数传递给目标函数。?12345678var 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()的第二个数组参数来传递额外的参数给方法。?123456789101112var 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”。

?1234function f(message) {alert(message);}f('H', 'e', 'l', 'l', 'o');在f()中,如果我们不想去接受其他的参数,我们可以用关键字arguments。arguments代表一个参数对象,它有一个代表长度的属性类似于数组。

123456789function 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()。? o = {x : 15};function f(message1, message2) {alert(message1 + ( this.x * this.x) + message2);}function g(object, func) {// arguments[0] = object// arguments[1] = funcvar 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。

6.如何理解和熟练运用js中的call及apply

概念:

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的。换句话说,就是为了改变函数体内部 this 的指向。

例如:

通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样domNodes就可以应用Array下的所有方法了。

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

7.js 的apply和call方法是用来干嘛的,怎么用

下面为你介绍下 extjs中的 apply的用法

方法的签名

apply( Object obj, Object config, Object defaults ) : Object

参数说明

第一个参数是要复制的目标对象;第二个参数是复制的源对象;第三个参数是默认源对象,第三个参数是可选的,意味着如果第三个参数有值,则将第三个参数也复制到目标对象中

apply实例

下面的代码中,Ext.apply(b2,b1)这一语句把b1的属性拷贝到了b2对象中,因此调用b2的f1方法可以弹出"p2 value"的提示信息。尽管b2对象已经包含了p2属性值,但拷贝后该属性值会被覆盖。

var b1={ p1:"p1 value", p2:"p2 value", f1:function(){alert(this.p2)}};

var b2=new Object();

b2.p2="b2 value";

Ext.apply(b2,b1);

b2.f1();

参考资料: extjs中apply和applyIf的用法

希望以上的回答能够帮到你!

转载请注明出处JS代码网 » js中的call和apply的用法(Javascript中call和apply的区别与详解)

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(7)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(5)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

python爬虫js加载的数据(Python怎么获取js动态加载的数据)

阅读(6)

本文主要为您介绍python爬虫js加载的数据,内容包括Python怎么获取js动态加载的数据,谁能科普一下搜索引擎对js加载的数据是如何抓取的呢?,如何用python爬取网页中隐藏的div内容。利用WebBrowser控件来获取js动态加载的数据:首先,我要在Docume

资讯

macnode.js的run是灰的(Macpro安装node.js失败,怎么解决)

阅读(6)

本文主要为您介绍macnode.js的run是灰的,内容包括Macpro安装node.js失败,怎么解决,我宝宝三个月了,现在完全喝羊奶粉,但是大便现在是灰黑色的,是怎,不能安装vmtools,虚拟机打开了,一直是灰色的。window下:Linux下:#!/bin/bash#检查是否已经安

资讯

js得到input的文件(js文件里如何获取input的的值)

阅读(6)

本文主要为您介绍js得到input的文件,内容包括js文件里如何获取input的的值,javascript基础问题:得到inputtext里上的内容,inputfile在js里获取文件内容。根据id获取input节点2、通过value获取input的值示例:<body><input id=r1 type=text va

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(7)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(5)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

python爬虫js加载的数据(Python怎么获取js动态加载的数据)

阅读(6)

本文主要为您介绍python爬虫js加载的数据,内容包括Python怎么获取js动态加载的数据,谁能科普一下搜索引擎对js加载的数据是如何抓取的呢?,如何用python爬取网页中隐藏的div内容。利用WebBrowser控件来获取js动态加载的数据:首先,我要在Docume

资讯

macnode.js的run是灰的(Macpro安装node.js失败,怎么解决)

阅读(6)

本文主要为您介绍macnode.js的run是灰的,内容包括Macpro安装node.js失败,怎么解决,我宝宝三个月了,现在完全喝羊奶粉,但是大便现在是灰黑色的,是怎,不能安装vmtools,虚拟机打开了,一直是灰色的。window下:Linux下:#!/bin/bash#检查是否已经安

资讯

js的网页语句(javascript语句是什么?Dreamweaver8中的.它)

阅读(5)

本文主要为您介绍js的网页语句,内容包括关于html中javascript的语句,javascript语句是什么?Dreamweaver8中的.它,JavaScript使用什么语句向页面输入内容。Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务