最近在刷牛客网的前端题，涉及到很多apply(),call(),bind()的调用，今天抽空整理一下这种函数的调用方法。
【Web|前端知识点整理系列（二）—— apply() call() bind()】我们知道，在js里，万物皆对象，一个函数本身就是一个对象，所以它自然拥有一些方法，在js里，每一个函数都拥有一个prototype——Function，其中apply()，call()，bind()就是这个原型自带的方法。我们知道这三个方法都能改变函数this的指向，其实他们的区别不是很大，今天就整理一下他们之间的区别。
先说 apply() 方法，它让我们构造一个参数数组传递给函数，同时可以自己来设置 this 的值，这就是它最强大的地方。它有两个参数，第一个参数是传递给这个函数用来绑定this的值，第二个参数传递的是一个数组。
function a(xx) {
this.b = xx;
}
var o = {};
a.apply(o, [5]);
alert(a.b);
// undefined
alert(o.b);
// 5我们对a进行
apply()方法调用，函数 a 居然可以给 o 加属性值。当然，如果你 apply() 的第一个参数传递 null，那么在函数 a 里面 this 指针依然会绑定全局对象。再谈谈
call()，其实call()和apply()没有什么本质的区别，在于第二个参数，apply()传递的是一个数组，你想传递给这个函数的所有参数都放在数组里，而call()传递的是一个一个参数。function a(xx, yy) {
alert(xx, yy);
alert(this);
alert(arguments);
}
a.apply(null, [5, 55]);
a.call(null, 5, 55);
仅此而已。
再来看看
bind()方法，上面讲的无论是 call() 也好， apply() 也好，都是立马就调用了对应的函数，而 bind() 不会，bind() 会生成一个新的函数，bind()函数的参数跟 call()一致，第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind()生成的新函数返回后，你想什么时候调就什么时候调，看下代码就明白了var m = {
"x" : 1
};
function foo(y) {
alert(this.x + y);
}
foo.apply(m, [5]);
foo.call(m, 5);
var foo1 = foo.bind(m, 5);
foo1();
下面看一个牛客网上的例子，利用apply()调用函数。
题目描述
实现函数 callIt，调用之后满足如下条件
1、返回的结果为调用 fn 之后的结果
2、fn 的调用参数为 callIt 的第一个参数之后的全部参数
var a = 1;
var b = 2;
var test = function (first, second) {
return first === a && second === b;
};
callIt(test, a, b);
我们来实现这个callIt函数。
function callIt(fn) {
var args = [];
for(var i=1;
i推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）