位置：首页>> 网络编程>> JavaScript>> 编写一个JS组件来说说call和apply的用法

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

作者：ComPhilip　来源：经典论坛　发布时间：2008-11-23 17:11:00　

标签：call,apply,组件,函数,用户

在一个群上看到好几次问到call和apply的作用，function这两个方法的效果大家都很容易理解，但一般很难让人深刻地理解使用它们的时机。

call和apply都有一个功能：改变函数的上下文，也就是在调用函数的同时，改变函数内部this的指向的对象。apply还可以向函数传递参数。如果一个函数的调用必须给定相应的参数，则只能够用apply方法。

下面通过编写一个JS组件来说明这两个方法在什么时机下使用，主要用在事件处理上。

在制作表单时，常常需要让用户输入一定范围内的数据，超出这个范围的数据视为非法。如人的年龄,世界上没有一个人的年龄为-1岁。如果采用下列列表让用户输入，列表可能太长而影响用户使用体验。我们可以使用一个文本框，让用户输入数据，然后验证。由于这种情况很常见，那么为用JS来编写一个组件，把一个文本框封装起来，实现验证逻辑，提高代码的可重用性。

完整的代码如下:

<html><head><title>Document Title</title></head><body><script type="text/javascript">//为Array类添加两个新方法Array.prototype.Add = function(item){for(var i=0;i<this.length;i++)if (this[i]==item)return;this.push(item);}Array.prototype.Remove = function(item){for(var i=0;i<this.length;i++)if (this[i]==item){this.splice(i,1);break;}}function NumTextBox(controlId,min,max){if (!controlId || typeof(controlId)!='string')throw new Error('参数controlId为空或不是字符串类型');if (isNaN(min))throw new Error('参数min必须为数字');if (isNaN(max))throw new Error('参数max必须为数字');min = min*1; //如果 min = '123',转化为数字类型max = max*1;if (min>max)throw new Error('min不能大于max');this._dom = null; //组件的DOM对象this._invalidTypeHandler = []; //数据类型不正确时调用的函数数组this._overflowHandler = []; //数据超出范围时调用的函数数组this._min = min; //最小值this._max = max; //最大值this._init(); //初始化}NumTextBox.prototype = {getValue : function(){ //获取当前值return this._dom.value*1;},setValue : function(value){ //设置当前值if (isNaN(value))throw new Error('参数value必须为数字');value = value*1;if (value<this._min || value>this._max)throw new Error('数据不合法');//数据不合法this._dom.value = value;},getMin : function(){ //获取最小值return this._min;},setMin : function(value){//设置最小值if (isNaN(value) || value*1 > this._max)throw new Error('参数value不是数字或大于max');this._min = value*1;},getMax : function(){//获取最大值return this._max;},setMax : function(value){//设置最大值if (isNaN(value) || value*1 < this._min)throw new Error('参数value不是数字或大于max');this._max = value;},AddInvalidTypeEventHandler : function(handler){//添加非法数据类型处理函数if (typeof(handler)!='function')throw new Error('参数handler必须为函数');this._invalidTypeHandler.Add(handler);},RemoveInvalidTypeEventHandler : function(handler){//移除非法数据类型处理函数if (typeof(handler)!='function')throw new Error('参数handler必须为函数');this._invalidTypeHandler.Remove(handler);},AddOverflowEventHandler : function(handler){//添加溢出处理函数if (typeof(handler)!='function')throw new Error('参数handler必须为函数');this._overflowHandler.Add(handler);},RemoveOverflowEventHandler : function(handler){//移除溢出处理函数if (typeof(handler)!='function')throw new Error('参数handler必须为函数');this._overflowHandler.Remove(handler);},_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();},_checkValue : function(ext){//检查数据ext = ext ? ext : window.event;var oNumTextBox = this.oNumTextBox;if (this.value == "")return;if (isNaN(this.value)){oNumTextBox._raiseInvalidTypeEvent.apply(oNumTextBox,[ext]);return;}var value = this.value*1;if (!(value>=oNumTextBox._min && value <=oNumTextBox._max))oNumTextBox._raiseOverflowEvent.apply(oNumTextBox,[ext]);},_init : function(controlId,min,max){ //创建DOMthis._dom = document.createElement('input');this._dom.type = 'text';this._dom.id = controlId;this._dom.name = controlId;this._dom.oNumTextBox = this;this._dom.onblur = this._checkValue;//事件绑定document.body.appendChild(this._dom);//放入网页中}}function invalid1(ext){alert("valid1\n,当前值为"+this.getValue());}function invalid2(ext){alert("valid2，测试多处理函数和保留焦点");return true;}function overflow(ext){alert("输入的值必须在"+this.getMin()+"和"+this.getMax()+"之间");return true;}var test = new NumTextBox("test",18,60);test.AddInvalidTypeEventHandler(invalid1);//添加非法数据类型事件处理函数test.AddInvalidTypeEventHandler(invalid2);test.AddOverflowEventHandler(overflow);//添加溢出事件处理函数</script></body></html>

凡是私有的方法和成员我都以下划线(_)作为变量名的开头，使用类时，不应使用这些接口，否则会出现不正确的结果。

具体分析请往下看

2 3 4 下一页

投稿

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

猜你喜欢