[置顶] 【JavaScript语言精粹系列】apply的用法

之前写过一个apply的用法的博客：http://rainbow702.iteye.com/admin/blogs/1635299

但在读了JavaScript语言精粹中的介绍之后，发现之前的理解还不是很好，所以，今天重写一个实例来说明一下。

先说明一下apply函数的声明：

apply(context, args);

 其中， context 表示要绑定给方法的this的值，args表示方法执行所需要的参数，它必须是一个数组。

另外，上面说到的方法不是指apply本身，而是调用apply的那个方法。比如下面这行代码：

fn.apply();

其中的fn就是上面所说的方法。

好了，下面具体集合例子来说明apply的用法。

  

画面中有两个按钮，它们的click事件的绑定请看第8行和第12行的代码。

第18行和21行是我定义的两个方法，它们的方法体稍微有点不一样。

第24行和25行是我定义的两个对象。

 

下面通过DEBUG的方式，来看一下apply的执行过程：

① 单击第一个按钮：

  
此时，代码运行到第9行，准备为fn传递两个值，null 和 [stu] 

 

② 按下 F11


  
此时，代码运行到19行，fn方法内部。 

通过右边的“Scope Variables”，我们可以看到，此时的fn方法体内的this仍然是当前的window对象。也就是说，虽然传递了null给fn方法，但由于null的特殊性，它被无视了。而fn的参数obj的值，此时就是我们传递过来的stu这个对象。

 

③点击F10


  
 画面中弹出了 stu 的name属性的值。

 

④ 点击 确定 按钮，然后，点击F10按钮，代码将运行到第10行：

   

⑤ 按下F10按钮，也许，你会认为，画面将会弹出 per 的字样，但实际结果却是：

 
 对，程序出错了。为什么呢？请看一下第8行和第9行代码的区别。没错，你发现了，第9行的per没有被“[]”包着，也就是说传递给fn的不是一个数组，而直接是一个对象，这与apply所需的参数的形式是相违背的，所以，程序出错。

修正之后的代码我就不重新截图了。

 

⑥ 刷新页面后，点击，第二个按钮，代码将运行到第13行：

  

⑦点击 F11 按钮：

  
 通过右边的“Scope Variables”可以看到，fn的this发生了变化，变成了传递过来的stu对象。

⑧ 点击F10按钮，画面将显示 stu 字样：

 

 

⑨ 点击 确定按钮，然后，点击F8按钮，将会看到画面弹出 per 字样

 

 

源码请参见 附件的  test.zip

• 
• 大小: 85.8 KB

• 
• 大小: 92.3 KB

• 
• 大小: 92 KB

• 
• 大小: 91.1 KB

• 
• 大小: 91.2 KB

• 
• 大小: 91.4 KB

• 
• 大小: 91.1 KB

• 
• 大小: 91 KB

• 
• 大小: 92.7 KB

• 
• 大小: 91.7 KB

• test.zip (78.3 KB)
• 下载次数: 0

• 查看图片附件