JS中使用apply方法通过不同数量的参数调用函数的方法

apply()方法定义

函数的apply()方法和call方法作用相同，区别在于接收的参数的方式不同。
apply()方法接收两个参数，一个是对象，一个是参数数组。

apply()作用

1、用于延长函数的作用域

示例：

var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
sayColor();//"red"
sayColor.apply(o);//"blue"

这里通过apply()方法把函数动态绑定到了对象o上了，这时this指向o对象，得到结果"blue"。

2、对象不需要与方法有任何耦合关系

下面举个耦合的例子，看如何通过apply来解决这种耦合。

var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
o.sayColor=sayColor;
o.sayColor();//"blue"

这里先将函数放到了对象o中，这里对象和方法就紧耦合到一起了，方法的调用必须通过对象o。

没有使用apply()和call()方法那样灵活。
重构上面代码，得到前例中的代码。

var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
sayColor();//"red"
sayColor.apply(o);//"blue"

这里对象并没有绑定任何方法，只是在需要使用的时候，利用函数的apply或call方法来动态绑定。

对象和方法之间没有耦合在一起。这里还可以通过ES5提供的bind()方法来完成

3、实现可变参数函数传参

下面一个计算任意数量数字平均值的函数

average(,,);
average();
average(,,,,,,,,);
average(,,,,,,,,,);

average函数是一个称为可变参数或可变元函数(函数的元数是指其期望的参数个数)的例子。

当然这个函数也可以写成一个接收数组的形式。

averageOfArray([,,]);
averageOfArray([]);
averageOfArray([,,,,,,,,]);
averageOfArray([,,,,,,,,,]);

使用可变参数的函数更简洁、优雅。可变参数函数具有便捷的语法，至少让调用者预先明确地知道提供了多少个参数。

如果我有这样一个数组

var scores=getAllScores();

如何使用average函数计算平均值呢？

1.可变参数函数版本。

这时就可以和apply()方法配合使用，这里因为函数并没用引用this变量，因此第一个参数我们传入一个null。代码如下：

var scores=getAllScores();
average.apply(null,scores);

2.直接参数为数组的形式

这里可以直接传入数组参数。

var scores=getAllScores();
averageOfArray(scores);

以上两种形式，个人觉得都是可以，反而第二种更简单。多知道一种方法，对于遇到别人写的函数时，可以轻松应对，不需要重构代码。这个好处反而更多。

4、实现可变参数方法的传值

示例：buffer对象包含一个可变参数的append方法，该方法添加元素到函数内部的state数组中。

var buffer={
state:[],
append:function(){
for(var i=,n=arguments.length;i<n;i++){
this.state.push(arguments[i]);
}
}
};

这时append方法可以接受任意多个参数。

buffer.append('Hello,');
buffer.append('firtName',' ','lastName','!');
buffer.append('newLine');

形式如

buffer.append(arg1,arg2,arg3,...)

借助apply方法的this参数，我们可以指定一个可计算的数组调用append方法

buffer.append.apply(buffer,getInputStrings());

注意：这里的buffer很重要，如果传递不同的对象，则append方法将尝试修改该错误对象的state属性。

提示

•使用apply方法指定一个可计算的参数数组来调用可变参数的函数
•使用apply方法的第一个参数给可变参数的方法提供一个接收者

附录一

average函数

function average(){
var args=[].slice.call(arguments);
var sum=args.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/args.length,);
}

averageOfArray函数

function averageOfArray(arr){
var sum=arr.reduce(function(prev,cur){
return prev+cur;
});
return parseInt(sum/arr.length,);
}

ES5 bind()方法

这个方法创建一个函数的实例，其this值会被绑定到传给bind()函数的值。
例如

var color='red';
var o={color:'blue'};
function sayColor(){
console.log(this.color);
}
var oSayColor=sayColor.bind(o);
oSayColor();//"blue"

兼容低版本,参考使用下面的版本 ：

if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = [].slice.call(arguments, ),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP? this: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
if (this.prototype) {
// Function.prototype doesn't have a prototype property
fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP();
return fBound;
};
}
赞 (0)

相关推荐

  • JavaScript中调用函数的4种方式代码实例

    1:方法调用模式 var myObj = {//对象字面量 param1: 1, param2: 2, sum: function (){ //this关键字只带当前的对象 return this.result = this.param1 + this.param2; } } myObj.sum(); //=>3 2:函数调用模式 var add = function(a, b){ return a + b; } //函数调用模式 add(1,2); //=>3 还可以 function ad

  • Objective-C 代码与Javascript 代码相互调用实例

    现在好的IOS 的 APP有时候会跟网页内容相关联,当然也是增加用户体验,及更好的,有效的体现APP 的功能. 由于本人在项目中会用到这部分功能,做下记录! JS调用OC 很多应用里面或多或少的调用了网页,来达到绚丽的效果,所谓的JS调用OC.....举个例子吧,网页上有个按钮 点击按钮跳转界面,跳转的动作由OC的代码实现. OC调用JS 还是举个例子,我们OC代码创建了输入框比如输入用户名,输入完成后显示在网页上,显示用户的用户名 一.利用webView的代理方法实现OC和JS的相互调用 创建

  • 浅谈js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

  • Android WebView的使用方法及与JS 相互调用

    Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m

  • Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • 一个Js文件函数中调用另一个Js文件函数的方法演示

    我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的.那么该如何解决呢?当然,你可以将代码通通copy过来,也许你并不喜欢这样. 例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b().而b()中又要调用a.js文件中的方法a().若

  • Javascript调用函数方法的几种方式介绍

    javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了.我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了. 在javascript中,方法可以通过以下几种方式执行: 1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释. 2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中

  • JS中使用apply方法通过不同数量的参数调用函数的方法

    apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu

  • JS中call/apply、arguments、undefined/null方法详解

    JS中call/apply、arguments、undefined/null方法详解

    a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

  • 关于JS中的apply,call,bind的深入解析

    在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一

  • JS中call(),apply(),bind()函数的区别与用法详解

    call() 介绍 通过提供一个新的this值给当前调用的函数/方法,从而改变this指向. 语法 fn.call(this.Arg, arg1, arg2,...) thisArg:当前调用函数this指向的对象arg1, arg2:传递的其他参数(直接传给形参可不写) 特点 可以直接调用函数—fn.call() 可以改变被调用函数的this指向为指定的— fn.call(this.Arg) 返回值 使用调用者提供的值和参数调用该函数的返回值,也就是函数的返回值.若该方法没有返回值,则返回un

  • JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg

  • js实现iframe跨页面调用函数的方法

    本文实例讲述了js实现iframe跨页面调用函数的方法.分享给大家供大家参考.具体实现方法如下: 在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent.html中含有IFrame并且IFrame指向child.html.现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法. 具体的代码实

  • php中动态调用函数的方法

    本文实例讲述了php中动态调用函数的方法.分享给大家供大家参考.具体分析如下: php中你可以动态调用函数,分为以下步骤: 1. 定义一个函数 2. 将函数名(字符串)赋值给一个变量 3. 使用变量名代替函数名动态调用函数 详细代码如下所示: <?php function addition ($a, $b){ echo ($a + $b), "\n"; } $result = "addition"; $result (3,6); ?> 希望本文所述对大家

  • C++中可以接受任意多个参数的函数定义方法(详解)

    能够接受任意多个参数的函数,可以利用重载来实现.这种函数的执行过程类似于递归调用,所以必须要有递归终止条件. #include <iostream> #include <bitset> void print() {} // 递归终止条件.这是必需的. template<typename Type, typename... Types> void print(const Type& arg, const Types&... args) { std::cou

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • Python入门_学会创建并调用函数的方法

    Python入门_学会创建并调用函数的方法

    这篇文章主要介绍下如何创建并调用函数. print():是打印放入对象的函数 len():是返回对象长度的函数 input():是让用户输入对象的函数 ... 简单来说,函数就是将对象放进去,然后就可以得到处理结果.在Python中有很多自带函数,具体可以参见此链接: https://docs.python.org/3/library/functions.html Python自带的函数有限,想要解决更多的问题,我们需要学会自己创建函数. def(即define):指定义一个函数 arg(即ar

随机推荐