• 浅解读JS中的call和apply


    今天我们简单的解读下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

  • 相关阅读:
    BZOJ5104 二次剩余板子
    BZOJ5329 [Sdoi2018]战略游戏 圆方树+虚树
    BZOJ1095 动态点分治
    BZOJ3992: [SDOI2015]序列统计
    kd-tree板子
    thusc2018翻车记
    BZOJ5336 DP套DP
    BZOJ4316 仙人掌DP
    问题 F: 最小花费
    问题 C: 热浪
  • 原文地址:https://www.cnblogs.com/lidj/p/3171363.html
Copyright © 2020-2023  润新知