call 和 apply 是 js 中功能强大的函数,call 和 apply 的功能完全相同,只是传递的参数不同,初学者只需要记忆其中一种并熟练应用即可,下面先聊一聊 call。
call 的主要功能有两个,一个是给函数传递参数,一个是给扩充函数的作用域。传递参数的话其实没什么卵用,这个等会下面会讲到,最重要的是扩充函数的作用域,那么函数的作用域是什么,请看代码
- window.job = 'teacher';
- function showJob() {
- alert(this.job);
- }
- showJob(); //teacher
在一个正常函数 showJob 中,this 指向的是 window,也就是说 this 此时就是 window 对象。当然,如果你在代码中加入了
- 'use strict';
使用严格模式,那么此时 this 的指向是 undefined,现在我们先忽略这种其他情况回到问题。那么问题来了,我现在不想让 this 指向 window,或者说我不想让这个输出是 teacher,我要怎么改变函数中的 this。
- window.job = 'teacher';
- var obj = {
- job: 'student'
- };
- function showJob() {
- alert(this.job);
- }
- showJob.call(obj); //student
只需要在 showJob 调用的时候,在函数后面加多一个 call,然后在参数中放入 this 指向的对象即可。记住:call 是在调用时使用,换个名词叫动态绑定。那么现在我们就学完了 call 最重要的功能,通俗讲就是改变 this。
call 有另一个比较著名的应用场景,就是在类数组转化成数组的时候
- var obj = {
- 0 : 'a',
- 1 : 'b',
- length: 2
- };
- var objArr = Array.prototype.slice.call(obj) // ['a', 'b']
调用 Array 原型上的方法时,改变了 slice 中调用对象,也就是 this 的指向,将 this 指向替换成类数组。
如果你熟悉原型继承,可以接着看一下这一段
- var Parent() {}
- Parent.prototype.showJob(callback) { //ajax etc... callback(); //undefined callback.call(this) // 'teacher' } function Child(){ this.job = 'teacher'; } Child.prototype = new Parent(); Child.prototype.show = function(){ alert(this.job); } var child = new Child(); child.showJob(child.show);
Parent 和 Child,child 形成了一条原型继承链。那么当 child 调用原型链上的方法,在 showJob 方法中传入 callback 回调的时候,回调上的 this 实际上是没有定义的,所以如果想动态绑定 callback 中的 this , 可以借助 call。
最后讲一下 call 的另外一个应用:传递参数,这也是 call 和 apply 之间的唯一区别
- function sum(num1, num2) {
- return num1 + num2;
- }
- function callSum(num1, num2) { //两者功能相同 return sum.call(this, num1, num2); return sum.apply(this, [num1, num2]); } alert(callSum(10, 20)); //30
注意这时候 this 虽然没什么卵用,但是一样要写上。
总结一下: 1.call 和 apply 功能相同,只是传递参数不同,只需要使用熟悉其中一种 2. call 主要的用途是扩展函数作用域,改变 this 指向 3.
call 还可以传递参数,或者和 2 一起使用时传递参数。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: