JavaScript Apply与Call用法说明

先来看一段范例：

 

<script type="text/javascript">

       //定义一个全域变数pig
       var pig = "猪脑袋";
       $(function () {
           //丢进去一个jQuery物件，因此funciton里面的this就代表jQuery物件。
           //接着就可用jQuery.attr()叫出物件属性
           function TestApply1() {
               alert(this.attr('href'));
           }
           TestApply1.apply($('#link'));
           //-----------------------------------------------------------


           //丢进去一个windows物件，因此function裡面的this代表window
           //因为我增加了一个全域变数叫pig，所以用this.pig得到的值就是"猪脑袋"
           function TestApply2() {
               alert(this.pig);
           }
           TestApply2.apply(window);
           //结论：丢进去什麼，裡面的this就是什麼
           //----------------------------------------------------------


           //顺便介绍一下第二个参数的用法
           //我新增了一个物件叫obj，他内含一个属性叫myName
           //当我new 一个 obj丢进去，this就代表obj这个物件，
           //因此可以用this.myName点出obj的属性。
           //第二个参数传一个阵列进去。 
           //TestApply3这个function有两个参数，所以我丢进一个有两个值的阵列进去。

           function obj() {
               this.myName = "God is Gril";
           }
           function TestApply3(arg1, arg2) {
               alert(this.myName + arg1 + arg2);
           }
           TestApply3.apply(new obj(), ['是个', '好地方']);          
       });
</script>

 

this 这个关键字可以在{}内指到class或是method本身
当用apply或call时，就可以传入所指定的物件，在function里面成为"this"
如下:

 

如果我直接呼叫TestApply4()时，弹出的对话框是

 

但当我把一个字串传进去，这时候this就变成这个字串，弹出的对话框就变成

 

当然可以传任何不同的东西进去，就像最上面的范例，
假设在DOM上抓了一个元素，传一个jQuery物件进去，在function内部就可以用this代表这个jQuery物件。
 
那到底有什麼用呢?
目前想到可以运用的，就是以前执行事件时，必须先在物件上绑上事件，
并指定一个function。但利用apply就可以用另外一种作法，并且可以传参数进去。

<script type="text/javascript">
       $(function () {
           //当A按钮click时，执行AlertValue这个function，跳出按钮的value
           $("#A").click(AlertValue);
           //当B按钮click时，一样执行AlertValue，执行时function内部的this
           //会变成B按钮，并且可用一个阵列传入参数。
           $("#B").click(function () {
               AlertValue.apply(this, ["1", "2", "3"]);
           });
       });

       //弹出按钮的value，并判断如果有参数的话弹出参数值。
       function AlertValue() {
           alert(this.value);
           if (arguments.length > 0) {
               for (var i = 0; i < arguments.length; i++) {
                   if (typeof (arguments[i]) != "object")
                       alert(arguments[i]);
               }
           }
       }
</script>

 

而call跟apply的差别，就在於apply的第二个参数是阵列，而call则是一个一个指定参数
如上面的例子，用call呼叫的话会变成；AlertValue.call(this,"1","2","3");
用apply的好处是可以先把阵列準备好，然后重复使用，不用一个一个指定。
 
大概是这个样子，虽然这两个method平常可能不太会用到，但我个人觉得多会一些东西
将来有需要用到时就可以多一种写法，也许会有意外的收获。