zoukankan      html  css  js  c++  java
  • 浅解读JS中的call和apply

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

    我们来看一个例子

           /*
            * 数据在
            * 页面呈现
            */
            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. 好,我们来看看这样的一个例子。

    View Code
     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         }

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

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

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

    各位下次见

  • 相关阅读:
    第一次团队作业——团队展示
    TAC队--团队选题报告
    TAC 坦克队
    Leetcode题库——16.最接近的三数之和
    Leetcode题库——11.盛最多水的容器
    Leetcode题库——23.合并k个排序链表
    Leetcode题库——4.寻找两个有序数组的中位数
    Leetcode题库——15.三数之和
    Leetcode题库——12.整数转罗马数字
    Leetcode题库——19.删除链表的倒数第 n 个节点【##】
  • 原文地址:https://www.cnblogs.com/heardawn/p/2668771.html
Copyright © 2011-2022 走看看