浅谈JavaScript的apply和call语句

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈JavaScript的apply和call语句相关的知识,希望对你有一定的参考价值。

我们试图在回调函数中,用this表示oDiv对象,这样感觉爽。

1    animate(oDiv,{"left":600},2000,function(){

2        this.style.backgroundColor = "red";

3    });

但是不行,回调函数中this不是oDiv。

 

所以我们现在要想一个办法,让callback运行,并且callback里面的this是oDiv。

1    callback.call(elem);

或者:

1    callback.apply(elem);

执行callback函数,并且让callback函数中的this关键字为elem。

 

例子:

1            var obj2 = {

2                 "name" : "树懒",

3                 "age" : 16,

4                 "sex" : "男"

5            }

6     

7            function xianshixinxi(){

8                 alert(this.name);

9            }

10    

11           //下面这个call语句的含义有两层:

12           //1. xianshixinxi函数将被调用

13           //2. 同时这个函数内部的this就是obj了

14           xianshixinxi.call(obj2);

 

 

说白了apply、call功能是一样的,功能都是:让函数调用,并且给函数设置this是谁。

call就是英语呼叫的意思,apply是应用的意思。

 

现在说说区别:

 

1            var obj = {

2                 "name" : "考拉",

3                 "age" : 18,

4                 "jiehun" : false

5            }

6     

7     

8            function xianshixinxi(a,b,c){

9                 console.log(this.name);

10                console.log(a + b + c);

11           }

12    

13           xianshixinxi.call(obj,2,3,4);

14           xianshixinxi.apply(obj,[2,3,4]);

 

call和apply功能一样,就是让一个函数里面的this设置为一个对象。

拿上例来说,xianshixinxi函数里面的this就是obj对象。但是我们发现,xianshixinxi这个函数,有参数。那么我们现在又想设置this是谁,又想把参数往里传,此时就有区别了:

1    fn.call(obj,参数1,参数2,参数3……);

 

1    fn.apply(obj,[参数1,参数2,参数3……]);

call需要你用逗号罗列所有参数,但是apply是把所有参数写在数组里面。即使只有一个参数,也必须写在数组里面。

 

比如:

1            function showInfo(n){

2                 for(var i = 1 ; i <= n ; i++){

3                     console.log(this.name);

4                 }

5            }

6            showInfo.call(obj,10);

7            showInfo.apply(obj,[10]);

一定不要记混,apply要的是数组,你想啊,ly、ly、ly长得像list,就是数组。

 

总结一下,这两个东西功能一致,就是把一个函数里面的this设置为某个对象。区别就是后面的参数的语法。

 

以上是关于浅谈JavaScript的apply和call语句的主要内容,如果未能解决你的问题,请参考以下文章

浅谈js中的this,call,apply

浅谈javascript中的callapplybind

浅谈call , apply ,bind 的 差异

浅谈JS中的callapplybind方法

浅谈call apply bind的区别

Javascript中call和apply的区别与详解