call和apply上手分析

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指向替换成类数组。而数组中的slice方法只切割了类数组对象中key为数字字符串的键值对,所以得到的objArr为纯数组。
如果你熟悉原型继承,可以接着看一下这一段

   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在构造函数中也有应用

   function Parent(name, age){
       this.name = name;
       this.age = age;
       this.speak = function(){
           console.log('name', name);
       }
   }
   function Child(name, age, weight){
       Parent.call(this, name, age);
       this.weight = weight;
   }
   var child = new Child('Jack', 23, '100');
   child.name   // 'Jack'  

传递参数

最后讲一下call的另外一个应用:传递参数,这也是call和apply之间的唯一区别

   function sum(num1, num2){
       return num1 + num2;
   }
   function callSum(num1, num2){
       //两者功能相同
       return sum.call(null, num1, num2);
       return sum.apply(null, [num1, num2]);
       return sum.apply(null, arguments);
   }
   alert(callSum(10, 20));   //30

注意这时候this作为调用对象不能省略,如果想使用默认对象可以用null作为第一个参数。
总结一下: 1.call和apply功能相同,只是传递参数不同,而我们在传递参数的时候经常是传入arguments对象,它本身就是一个类数组,所以apply的应用更广 2. call 主要的用途是扩展函数作用域,改变this指向 3.
call还可以传递参数,或者和2一起使用时传递参数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值