1 call和apply，它们的作用都是将函数绑定到另外一个对象上去运行
2 两者的格式和参数定义：
3 call( thisArg [，arg1，arg2，… ] ); // 参数列表，arg1，arg2，...
4 apply(thisArg [，argArray] ); // 参数数组，argArray
5 上面两个函数内部的this指针，都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的
6
7 一、call 的简单用法
8 首先，我们先看个简单的例子（call）：
9 [html] view plaincopyprint?
10 <!doctype html>
11
12 <html>
13 <head>
14 <title> call-apply </title>
15 </head>
16
17 <body>
18 <input type="text" id="idTxt" value="input text">
19
20 <script type="text/javascript">
21 var value = "global var";
22
23 function mFunc()
24 {
25 this.value = "member var";
26 }
27
28 function gFunc()
29 {
30 alert(this.value);
31 }
32
33 window.gFunc(); // show gFunc, global var
34 gFunc.call(window); // show gFunc, global var
35 gFunc.call(new mFunc()); // show mFunc, member var
36 gFunc.call(document.getElementById('idTxt')); // show element, input text
37 </script>
38
39 <script language="javascript">
40 var func = new function()
41 {
42 this.a = "func";
43 }
44
45 var func2 = function(x)
46 {
47 var a = "func2";
48 alert(this.a);
49 alert(x);
50 }
51
52 func2.call(func, "func2"); // show func and func2
53 </script>
54 </body>
55 </html>
56 然后，运行结果如下：
57 global var
58 global var
59 member var
60 input text
61 func
62 func2
63 测试环境：Google Chrome 10.0.648.45
64 最后，分析结果
65 1、全局对象window调用函数gFunc，this指向window对象，因此this.value为global var
66 2、函数gFunc调用call方法，this默认指向第一个参数window对象，因此this.value也为global var
67 3、函数gFunc调用call方法，this默认指向第一个参数new mFunc()，即mFunc的对象，因此this.value为mFunc的成员变量member var
68 4、函数gFunc调用call方法，this默认指向第一个参数input text控件，即id=‘idTxt’的控件，因此this.value为input控件的value值input text
69 5、函数func2调用call方法，this默认指向第一个参数func函数对象，因此this.value为this.a，即func
70 6、函数func2调用call方法，第二个参数属于函数对象func2的参数，因此alert(x)为第二个参数func2
71
72 二、call 继承用法与改进
73 js使用call模拟继承
74 测试代码：
75 [html] view plaincopyprint?
76 <!doctype html>
77
78 <html>
79 <head>
80 <title> call - apply for inherit </title>
81 </head>
82
83 <body>
84 <script type="text/javascript">
85 function baseA() // base Class A
86 {
87 this.member = "baseA member";
88 this.showSelfA = function()
89 {
90 window.alert(this.member);
91 }
92 }
93
94 function baseB() // base Class B
95 {
96 this.member = "baseB member";
97 this.showSelfB = function()
98 {
99 window.alert(this.member);
100 }
101 }
102
103 function extendAB() // Inherit Class from A and B
104 {
105 baseA.call(this); // call for A
106 baseB.call(this); // call for B
107 }
108
109 window.onload = function()
110 {
111 var extend = new extendAB();
112 extend.showSelfA(); // show A
113 extend.showSelfB(); // show B
114 }
115 </script>
116 </body>
117 </html>
118 运行结果如下：
119 baseB member
120 baseB member
121 测试环境：Google Chrome 10.0.648.45
122 结果分析：
123 预期的结果，应该是输出 baseA member 和 baseB member，但实际输出却是 baseB member 和 baseB member
124 （已在IE9、8、6，Maxthon、Chrome、FF、Opera、Safari、360等浏览器测试过，结果都是后者：baseB member）
125 至此，机器是不会错的，这就需要我们深入分析
126 我们可能会很容易想到是this引起的，this两次都指向了baseB对象，但是推测真是这样吗？
127 为了探究实质，我们借助chrome浏览器的调试工具，下断点，进行调试，结果发现：
128
129 当调用extend.showSelfA();时，此时的this指向extendAB（并不是我们推测的两次都指向baseB对象）
130 真实原因是extendAB对象的成员变量member在被baseB.call(this);实例化时，被baseB的成员member覆盖了，即extendAB的成员member由baseA member赋值成了baseB member
131 当然，我们也可以对上面baseA代码稍作修改，来验证我们调试分析的正确性：
132 function baseA() // base Class A
133 {
134 this.memberA = "baseA member"; // member改成memberA，以区分baseB中的member
135 this.showSelfA = function()
136 {
137 window.alert(this.memberA); // 显示memberA
138 }
139 }
140 再次运行chrome等浏览器，结果如下：
141 baseA member
142 baseB member
143 结果和我们的预期相同，同时chrome调试信息也验证了我们的正确性：
144
145
146
147 继承改进（prototype）
148 以上模拟继承方法，仔细分析不是最好的。
149 因为每次在函数（类）中定义了成员方法，都会导致实例有副本，因此可以借助prototype原型，进行改进
150 改进举例如下：
151 [html] view plaincopyprint?
152 <!doctype html>
153
154 <html>
155 <head>
156 <title> call - apply for prototype </title>
157 </head>
158
159 <body>
160 <script type="text/javascript">
161 var Class = {
162 create: function() // create Function
163 {
164 return function()
165 {
166 this.initialize.apply(this, arguments);
167 }
168 }
169 };
170
171 var Person = Class.create(); // Create Class Person
172 Person.prototype = { // prototype initialize
173 initialize: function(obj1, obj2)
174 {
175 this.obj1 = obj1;
176 this.obj2 = obj2;
177 },
178 showSelf: function()
179 {
180 alert("obj: " + this.obj1 + " and " + this.obj2);
181 }
182 }
183
184 // instance Class
185 var person = new Person("man", "women"); // two params
186 person.showSelf(); // show person
187 </script>
188 </body>
189 </html>
190 运行结果如下：
191 obj: man and women
浙公网安备 33010602011771号