首页 > 技术文章 > 浅解读JS中的call和apply

lidj 2013-07-04 12:52 原文

今天我们简单的解读下call和apply这个两个方法
call和apply都是把某个函数给某个具体的对象使用。这两个函数有什么区别了,
call接受的参数是不定的啊。第一个参数是要赋给的所有者,也就是说,我要给的对象。之后的参数就是
要传递的值,有几个值就传递几个参数。
apply只接受两个参数,第一个参数和call一样也是函数的所有者,第二个参数可以是一个带下标的集合。

我们来看一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
 * 数据在
 * 页面呈现
 */
 function dwn(s) {
     document.write(s + "<br />");
 }
 
 window.onload = function () {
     var p = new Point(1, 2);
     var v = new Vector(-1, 2);
     var p1 = add.call(p, 2, 3);
     var p2 = add.apply(v, [2, 3]);
     dwn(p1);
     dwn(p2);
 }
 
 function Point(x, y) {
     this.x = x;
     this.y = y;
     this.toString = function () {
         return "[" + [x, y] + "]";
     }
 }
 
 function Vector(x, y) {
     this.x = x;
     this.y = y;
     this.toString = function () {
         return "(" + [x, y] + ")";
     }
 }
 
 function add(x, y) {
     return new this.constructor(this.x + x,this.y + y);
 }

 代码运行的结果:

     [3,5]
     (1,5)

  在add函数里面this表示的对象的属性值。

  我们来扩展下自己的思维,


假如说我们要做这样的一个功能。
进行数据验证。
我们由多个验证类,里面都有一个check函数,
根据不同的对象调用不同的Check. 好,我们来看看这样的一个例子。

复制代码
 1         /*
 2         * 数据在
 3         * 页面呈现
 4         */
 5         function dwn(s) {
 6             document.write(s + "<br />");
 7         }
 8 
 9         function CheckCall(checkStr, length) {
10             return this.check(checkStr, length);
11         }
12 
13         function CheckLength() {
14 
15             this.check = function (checkStr, maxLength) {
16                 if (checkStr.length < maxLength) {
17                     return true;
18                 } else {
19                     return false;
20                 }
21             }
22         }
23 
24         function CheckEmpty() {
25 
26             this.check = function (checkStr) {
27                 if (checkStr.length == 0) {
28                     return false;
29                 } else {
30                     return true;
31                 }
32             }
33         }
34 
35         window.onload = function () {
36             var chLen = new CheckLength();
37             var chEm = new CheckEmpty();
38             var checkStr = "abcdefg";
39             var p = CheckCall.call(chLen, checkStr, 20);
40             var p1 = CheckCall.call(chEm, checkStr);
41             dwn(p);
42             dwn(p1);
43         }
复制代码

我们是不是还可以进一步来想想。继续来做封装。创建一个工厂类,这个工厂类做什么了。他接受几个参数,第一个参数就是验证类名集合,第二个参数就是要验证的数据,那么我们
在进行表单提交的时候,进行数据验证的画面只要直接调用我们的工厂就好了。以后要加验证类,也很简单。

关于这部分,大家去实现下,大家也可以把自己的实验结果发表过来,让我们借鉴下。

这次只是简单的说了下如何使用问题。下次我们进一步来讨论。

来自:http://www.cnblogs.com/heardawn/archive/2012/09/03/2668771.html

推荐阅读