编写一个JS组件来说说call和apply的用法（4）

现在我们说说这里为什么要用apply。

其实这里大可以不用apply，因为我们可以通过修改_raiseInvalidTypeEvent和_raiseOverflowEvent方法的声明，使它有两个参数，分别传递类对象和ext对象。有这两个对象，它们完全可以完成任务(什么任务，等一下说)。但我为什么要在这里apply改变上下文呢。其实是为了缩小this指向非类对象的范围。通过apply，我们立刻把函数的上下文改为类对象，使指向非类对象的this仅仅存在于_checkValue。这样，对于自己以后的修改，检查错误，提供了方便。那么为什么要用apply传递ext呢？使用call抛弃它不行吗？——这个当然行啦，我之所以用apply是为了保留额外的事件信息，使用类的人可能用到也说不定。

现在看看_raiseInvalidTypeEvent和_raiseOverfowEvent

_raiseInvalidTypeEvent : function(ext){//触发非法数据类型事件
        var cancel = false;
        for(var i=0;i<this._invalidTypeHandler.length;i++)
            cancel = this._invalidTypeHandler[i].apply(this,[ext]);
        if(cancel)
            this._dom.focus(); //获得焦点
    },
    _raiseOverflowEvent : function(ext){//触发溢出事件
        var cancel = false;
        for(var i=0;i<this._overflowHandler.length;i++)
            cancel = this._overflowHandler[i].apply(this,[ext]);
        if (cancel)
            this._dom.focus();
    },

其实这两个类功能一样。它们都是遍历整个函数指针数组，然后，逐个调用。这里才是apply真正的用法。

我们为什么要把类对象作为函数上下文呢？因为使用这个类的人，在外部可以通过this来访问类的方法来获取组件的接口（属性）。他们往往不在乎这个组件的其他信息（如构成这个组件的HTML代码），他们只想要知道用户输入的值。更何况这个值已转化成数字，而不是原来的字符串，那么就更方便他们的使用。

我们还要留意那个cancel变量，它是处理函数的返回值。要注意它是最后一个处理函数的返回值，因为后一个处理函数的返回值会覆盖前一个处理函数的访回值。这个cancel是根据处理函数返回的值来决定是否让文本框获得焦点。如果为true，则获得焦点，实际上是不让用户转移，直到他输入一个合法数据为止。如果为false，则用户可能留下一个非法的数据。

那看看如何使用这个类：

首先是声明三个处理函数：

function invalid1(ext){
    alert("valid1\n当前值为:"+this.getValue()); //调用了类对象的getValue方法
}
function invalid2(ext){
    alert("valid2,测试多处理函数和保留焦点");
    return true; //保留焦点
}
function overflow(ext){
    alert("输入的值必须在"+this.getMin()+"和"+this.getMax()+"之间");
    return true;
}

然后是实例化NumTextBox类

var test = new NumTextBox("test",18,60);

接着是把处理函数绑定到类的事件中：

test.AddInvalidTypeEventHandler(invalid1);//添加非法数据类型事件处理函数
test.AddInvalidTypeEventHandler(invalid2);
test.AddOverflowEventHandler(overflow);//添加溢出事件处理函数

这样就可以了。实际的使用就是如此简单。可重用性大大增强