在JavaScript中,apply() 和call() 方法在传递给它们的第一个参数的上下文 (范围) 中执行函数。让我们来看看他们的行动,以了解更多。假设你有一个对象人 ,如下所示:
var人 = {名称: “ dj”};
此外,您还有一个功能消息,如下所示:
功能消息 (年龄) { 返回'嗨$ {这个。姓名},你是$ {年龄}岁!”;}
现在,您需要在函数中传递person对象作为this的值。除了显式传递this的值外,还需要传递age参数的值。
您可以通过call() 或apply() 方法显式传递上下文 (此的值)。考虑下面的代码:
功能消息 (年龄) {返回'嗨$ {这个。姓名},你是$ {年龄}岁!”;} var人 = {名称: “ dj”}; 变量mes = 消息。呼叫 (人,30人 );控制台。日志(mes);// 嗨,dj,你已经30岁了!
使用call方法,我们将对象person作为此内部消息函数的值传递。您可以使用apply() 方法实现相同的效果,如下面的清单所示:
功能消息 (年龄) {返回'嗨$ {这个。姓名},你是$ {年龄}岁!”;} var人 = {名称: “ dj”}; varmes=信息。应用(人,[30,67]);控制台。日志(mes);// 嗨,dj,你已经30岁了!
在JavaScript中,call() 和apply() 方法的工作方式几乎完全相同,但有几个关键区别:
- call() 和apply() 的第一个参数是这对象。
- 在call() 方法中,函数的其他参数将作为单独的逗号分隔值传递。
- call() 方法接受零个或多个单独的参数。
- 在apply() 方法中,第二个参数是一个数组。
- apply() 方法接受一个参数数组。
- 当函数参数的数量固定时,您应该使用call() 方法。
- 当函数参数的数量不固定时,您应该使用apply() 方法。
示例调用方法
正如我们已经讨论过的,call() 方法可用于将此对象的显式值和逗号分隔的固定数量的参数传递给函数。考虑下面的代码:
foo (message)
函数 {控制台。日志(信息 这。姓名);} var p = {name: "dj"} foo.call (p,"hello" );
在上面的代码清单中,您在函数foo中传递了一个对象p作为this的值。调用方法的另一个用途是在构造函数链中。为了说明这一点,请考虑如下所示的函数car:
功能汽车(颜色,制作年份){this.color = 颜色;这个.makingy年 = makingy年;}
您可以使用call方法在car函数中传递thitem的值,如下面的清单所示:
gascar (颜色、制造年份) 的
功能 {汽车。呼叫 (这个,颜色,制造年份 );this。type = “gas”;} 功能电动车(颜色,制作年份){汽车。呼叫 (这个,颜色,制造年份 );this.type = "electric";}
现在,当您使用gascar和electriccar函数作为构造函数从这些函数创建对象时,将调用car函数,并将此值设置为新创建的对象。
var ec = 新电动车 (2010,“黑色” );控制台。日志(JSON。stringify(ec)); var gc = 新gascar (2007,“黑色” );控制台。日志(JSON。stringify(gc));
通过这种方式,可以使用call方法来创建构造函数链。
示例应用方法
使用apply方法,您可以在函数中将对象作为thit的值传递。但是,在这种情况下,参数作为单个数组传递。apply方法中只传递了两个参数:
- 第一个参数: 值为
- 第二个参数是参数数组。
在函数中,您可以使用关键字arguments读取arguments数组,如下所示:
foo ()
函数 {控制台。日志(参数[0] p。姓名 参数[1]);}var p = {name: "dj"}foo。应用(p,["您好:",“怎么了?”]);
在这个例子中,apply() 方法对于使用内置函数非常有用。考虑下面的代码:
var编号=[15,6,52,34,7]; var max = Math.max.apply (null,数字 );var min = Math.min.apply (null,数字 );控制台。日志(最大值);控制台。日志(最小);
在这里,您正在调用Math.max和Math.min方法来查找数字数组中的最大值和最小值。
结论
在JavaScript中,call和apply方法对于在函数中传递对象的不同值很有用。在call方法中,参数是单独传递的,而在apply方法中,参数是作为数组传递的。
在这篇文章中,我们了解了call和apply方法,但是在这个 “Easy JavaScript” 系列的下一篇文章中,您将了解JavaScript的另一个重要概念,敬请期待。同时,不要忘记查看Ignite UI ,您可以将其与HTML5,Angular,React或ASP.NET MVC一起使用来创建富Internet应用程序。