前端知识点整理系列(二)—— apply() call() bind()
2017-06-04 10:29
405 查看
最近在刷牛客网的前端题,涉及到很多
我们知道,在js里,万物皆对象,一个函数本身就是一个对象,所以它自然拥有一些方法,在js里,每一个函数都拥有一个
先说
我们对a进行
再谈谈
仅此而已。
再来看看
下面看一个牛客网上的例子,利用apply()调用函数。
题目描述
实现函数 callIt,调用之后满足如下条件
1、返回的结果为调用 fn 之后的结果
2、fn 的调用参数为 callIt 的第一个参数之后的全部参数
我们来实现这个callIt函数。
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<arguments.length;i++){ args.push(arguments[i]); } return fn.apply(this,args); }
相关文章推荐
- 奇妙JS代码系列(二)call,apply,bind用处整理
- 前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)
- 【前端知识点】JS中的call()和apply()方法
- 前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind
- JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】
- 前端知识点整理系列(一)—— 响应式布局
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
- javascript--关键字 apply bind call this
- 整理JavaScript的Call和Apply区别
- javascript中的作用域 (apply、call、.bind)
- 手机安全卫士开发系列(7)——知识点整理(2)
- 手机安全卫士开发系列(7)——知识点整理(1)
- 手机安全卫士开发系列(7)——知识点整理(1)
- js apply/call/caller/callee/bind使用方法与区别分析
- js apply/call/caller/callee/bind使用方法与区别分析
- javascript中的作用域 (apply、call、.bind)
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- js中的apply/call/caller/callee/bind
- Javascript中的this,call,apply,bind!
- js apply/call/caller/callee/bind使用方法与区别分析