访问者模式(Vistor):针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法。
例如IE中的attachEvent中的this指向的不知当前这个元素而是window对象,所以可以使用call或者apply方法来改变函数执行时的作用域,让某个对象在其他作用域中执行。
function bindIEEvent(dom,type,fn,data){
var data = data || {};
dom.attachEvent('on'+type,function(e){
fn.call(dom,e,data)
});
}
将事件源元素对象在事件回调函数作用域中执行,所以回调函数中的this就指代的是事件源元素对象了。
创建一个访问器,将必要的方法封装在内部,使用和管理起来会更加方便
var Visitor = (function(){
return {
//截取方法
slice:function(){
//splice方法参数,从原参数的第二个参数算起
var args = Array.prototype.splice.call(arguments,1);
//对第一个参数对象执行splice方法
return Array.prototype.splice.apply(arguments[0],args);
},
//追加数据方法
push:function(){
//强化类数组对象,是他拥有length属性
var len = arguments[0].length || 0;
//添加的数据从原参数的第二个参数算起
var args = this.splice(arguments,1);
//校正length属性
arguments[0].length = len + arguments.length - 1;
//对第一个参数对象执行push方法
return Array.prototype.push.apply(arguments[0],args);
},
//弹出最后一次添加的元素
pop:function(){
//对第一个参数对象执行pop方法
return Array.prototype.pop.apply(arguments[0]);
}
}
})();
对象访问器添加了三个数组方法,使用的数组对象的原生方法的访问来实现,有了这个就可以像数组一样操作一个对象了。
var a = new Object();
console.log(a.length) //undefined
Vistor.push(a,1,2,3,4)
console.log(a.length) // 4
Vistor.push(a,4,5,6)
console.log(a) //Object {0:1,1:2,2:3,3:4,4:4,5:5,6:6,length:7}
创建a对象是没有length属性的,但是调用了push方法就拥有了length属性。