JavaScript call apply使用——JavaScript对象的方法绑定到DOM事件后this指向问题
JavaScript对象与DOM对象进行绑定会遇到一个问题：如果被绑定的对象的方法中包含this关键字，当事件被触发时this指向的却是DOM对象，而不是之前的JS对象。
先来看看现象：
1 <html>
2 <head>
3 <title>apply_and_call</title>
4 </head>
5 <body onload="init()">
6 <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div>
7 <script type="text/javascript">
8 function init() {
9 var el = document.getElementById("testDiv");
10 var a = new classA(el);
11 }
12
13 function classA(el) {
14 this.a = 1;
15 this.container = el;
16 //绑定单击事件
17 this.container.onclick = this.click;
18 }
19 classA.prototype = {
20 click:function() {
21 alert(this.a);
22 }
23 }
24 </script>
25 </body>
26 </html>
当单击DIV后，弹出框显示undefined。
原因是当DOM对象响应单击事件后，事件方法中的this关键字指向的是DOM对象，此时DOM对象没有a属性，所以弹出undefined。
而程序员本意是响应事件方法中this指向的是classA的对象a，如何才能达到此目的？这就需要使用到call或apply方法。
下面再来熟悉下call方法：
摘要：
function.call(thisobj, args…)
参数：
thisobj
调用function的对象。在函数主体中，thisobj是关键字this的值。
args…
任意多个参数，这些参数将传递给函数function。
返回值：
调用函数function的返回值。
抛出：
TypeError
如果调用该函数的对象不是函数，则抛出该异常。
描述：
call()将指定的函数function作为对象thisobj的方法来调用，把参数列表中thisobj后的参数传递给它，返回值是调用函数后的返回值。在函数体内，关键字this引用thisobj对象。
如果将指定数组作为传递给函数的参数，请使用Function.apply()方法。
熟悉call()方法后，将代码1修改如下：
代码2：
1 <html>
2 <head>
3 <title>apply_and_call</title>
4 </head>
5 <body onload="init()">
6 <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div>
7 <script type="text/javascript">
8 function init() {
9 var el = document.getElementById("testDiv");
10 var a = new classA(el);
11 }
12
13 function classA(el) {
14 this.t = 1;
15 this.clickDele = createDele(this.click, this);
16 el.onclick = this.clickDele;
17 }
18 classA.prototype = {
19 click:function() {
20 alert(this.t);
21 }
22 }
23
24
25 function createDele(fun, obj, arg) {
26 return function() {
27 return fun.call(obj, arg);
28 }
29 }
30 </script>
31 </body>
32 </html>
代码2 25行：主要添加了createDele方法，该方法包含三个参数：fun、obj、arg，分别是“要执行的方法”、“fun中this需要指向的对象”、“传入fun中的参数”。该方法返回一个匿名方法。
匿名方法负责执行fun方法，同时将fun中的this指向obj，并使用作为arg传入参数，处理结果返回。
当程序执行走到第15行调用createDele方法，传入对象的方法和对象本身，createDele接收参数后返回一个匿名方法，this.clickDele被设置成为返回的匿名方法，16行代码将this.clickDele(匿名方法)绑定到DOM事件上，程序执行完毕，点击DOM(DIV)触发匿名方法，些时匿名方法中fun为之前传入的this.click(即：方法a.click)，obj为之前传入的this(即：对象a)，所以此时使用call方法使得this.click(即：方法a.click)中的this指向obj(即：对象a)，最终弹出结果为1。结果正确，达到了程序的本意。
回顾匿名方法多少会让人感到有些怪异：调用匿名方法时fun为什么会是this.click(即：方法a.click)、obj什么为是this(即：对象a)。这个问题就需要用JavaScript的闭包来解释了，这里暂不介绍闭包，后面会有介绍JavaScript闭包的文章发表，欢迎有兴趣的朋友持续关注！
不管各位看官信还是不信，反正道理和程序是没有问题的！：）
