javascript中call与apply的使用方法

最新推荐文章于 2021-05-23 19:19:06 发布

技术人宝哥

最新推荐文章于 2021-05-23 19:19:06 发布

阅读量1k

点赞数

分类专栏：前端/HTML5

本文链接：https://blog.csdn.net/code52/article/details/8955731

版权

前端/HTML5 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、基本语法：

call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

2、call的简单用法：

<body>

var value = "global var";

function mFunc() {

this.value = "member var";

}

function gFunc() {

alert(this.value);

}

window.gFunc(); // show gFunc, global var

gFunc.call(window); // show gFunc, global var

gFunc.call(new mFunc()); // show mFunc, member var

gFunc.call(document.getElementById('idTxt')); // show element, input text

</script>

var func = new function() {

this.a = "func";

}

var func2 = function(x) {

var a = "func2";

alert(this.a);

alert(x);

}

func2.call(func, "func2"); // show func and func2

</script>

</body>

最后，分析结果
1、全局对象window调用函数gFunc，this指向window对象，因此this.value为global var
2、函数gFunc调用call方法，this默认指向第一个参数window对象，因此this.value也为global var
3、函数gFunc调用call方法，this默认指向第一个参数new mFunc()，即mFunc的对象，因此this.value为mFunc的成员变量member var
4、函数gFunc调用call方法，this默认指向第一个参数input text控件，即id=‘idTxt’的控件，因此this.value为input控件的value值input text
5、函数func2调用call方法，this默认指向第一个参数func函数对象，因此this.value为this.a，即func
6、函数func2调用call方法，第二个参数属于函数对象func2的参数，因此alert(x)为第二个参数func2

3、call传递函数参数的用法：

a)不改变this，代码如下：
     var test="Tony";
     function doSomething(){
     alert(this.test);     //弹出 "Tony";
     }
     doSomething(); //   [调用] doSomething();
     doSomething.call(); // 函数.调用()
现在我们只是做了函数的调用，还没有改变this那么怎么改变 this 呢？这个时候call就要发挥威力了。
本来doSomething函数里的this表示的是 window ,我们执行下面这句。
     doSomething.call(某个对象);
这个时候doSomething里的this就变成了"某个对象",看下面的例子：
     var test="Tony";
     var myobj={
          test : "Tom"
     };
     function doSomething(){
          alert(this.test);
     }
     toolmao.call(); // 弹出 window.test   ，即 "Tony"
     toolmao.call(myobj); // 这个时候，doSomething函数里的this指向 myobj，
                          //所以弹出的是 myobj.test 即 "Tom"
     2.那如果里面有参数呢？看代码
     var test="Tony";
            var myobj={
                test : "Tom"
            };
            function doSomething(name, age){
            alert(this.test + ":" + name + age);
            }
            doSomething("Tony",23);//普通调用结果Tony:Tony23
            doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23
上面代码，我们可以看出，相比普通调用, call 只是多了一个用来指定this的参数,call 干什么用的？就是干这个用的!!现在有体会了吧？

4、apply的用法：

都知道call的用法了,apply其实是一个意思。只不过是调用参数的形式不一样罢了。
call是一个一个调用参数，而apply是调用一个数组。还是用上面相同的例子：
     var test="Tony";
            var myobj={
                test : "Tom"
            };
            function doSomething(name, age){
            alert(this.test + ":" + name + age);
            }
            doSomething("Tony",23);//普通调用结果Tony:Tony23
            doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23
            doSomething.apply(object,["Tony",23]);//apply调用结果与call相同
上面这写代码写红色部分就是apply的用法,怎么样？简单吧？