您现在的位置:首页 --> JavaScript --> javascript实现简单的链式调用
javascript实现简单的链式调用
浏览:877次 出处信息
用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻,貌似现在很多库都支持了方法的链式调用,比如YUI3等。链式调用是一个非常不错的语法特性,能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量。今天有人在群里说起javascript链式调用,写了几个简单的实现方式共大家参考一下:
一般我们我用函数构造一个类,例如:
01 |
var function Dog(name,age){ |
02 |
this .name = name; |
03 |
this .age = age; |
04 |
}; |
05 |
Dog.prototype={ |
06 |
getName: function (){ |
07 |
console.log( this .name); |
08 |
}, |
09 |
getAge: function (){ |
10 |
console.log( this .age); |
11 |
} |
12 |
}; |
定义一个Dog类,并具备几个简单的方法
1 |
var dog1= new Dog( "旺旺" ,3); |
2 |
dog1.getName(); |
3 |
dog1.getAge(); |
实例化,并且调用方法。
要实现链式调用是非常简单的事情,唯一需要做的就是在每个方法后面返回this。例如:
01 |
var Dog= function (name,age){ |
02 |
this .name = name; |
03 |
this .age = age; |
04 |
}; |
05 |
Dog.prototype={ |
06 |
getName: function (){ |
07 |
console.log( this .name); |
08 |
return this ; |
09 |
}, |
10 |
getAge: function (){ |
11 |
console.log( this .age); |
12 |
return this ; |
13 |
} |
14 |
}; |
15 |
|
16 |
var dog1= new Dog( "旺旺" ,3); |
17 |
dog1.getName().getAge(); |
上面的代码可以看出,Dog方法上多了一段代码:return this;
细心一点你会发现这里dog1实例前还需要一个new初始化,还是有点不方便。在改进一下:
01 |
var Dog= function (name,age){ |
02 |
this .name = name; |
03 |
this .age = age; |
04 |
}; |
05 |
Dog.prototype={ |
06 |
getName: function (){ |
07 |
console.log( this .name); |
08 |
return this ; |
09 |
}, |
10 |
getAge: function (){ |
11 |
console.log( this .age); |
12 |
return this ; |
13 |
} |
14 |
}; |
15 |
window.Dogs= function (name,age){ |
16 |
return new Dog(name,age); |
17 |
}; |
18 |
Dogs( "旺旺" ,3).getName().getAge(); |
这里在window下定义一个Dogs方法,作为Dog的别名,这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了,这样有两个全局变量变量Dog和Dogs,在改进一下:
01 |
var Dog= function (name,age){ |
02 |
if (!( this instanceof Dog)){ |
03 |
return new Dog(name,age); |
04 |
} |
05 |
this .name = name; |
06 |
this .age = age; |
07 |
}; |
08 |
Dog.prototype={ |
09 |
getName: function (){ |
10 |
console.log( this .name); |
11 |
return this ; |
12 |
}, |
13 |
getAge: function (){ |
14 |
console.log( this .age); |
15 |
return this ; |
16 |
} |
17 |
}; |
18 |
Dog( "旺旺" ,3).getName().getAge(); |
这里在构造函数中加了这么一句:
1 |
if (!( this instanceof Dog)){ |
2 |
return new Dog(name,age); |
3 |
} |
判断this是否为Dog实例,如果不是就创建一个新实例。
更为安全代码:
01 |
( function (){ |
02 |
var Dog= function (name,age){ |
03 |
if (!( this instanceof Dog)){ |
04 |
return new Dog(name,age); |
05 |
} |
06 |
this .name = name; |
07 |
this .age = age; |
08 |
}; |
09 |
Dog.prototype={ |
10 |
getName: function (){ |
11 |
console.log( this .name); |
12 |
return this ; |
13 |
}, |
14 |
getAge: function (){ |
15 |
console.log( this .age); |
16 |
return this ; |
17 |
} |
18 |
}; |
19 |
return (window.Dog=Dog); |
20 |
})(); |
21 |
Dog( "旺旺" ,3).getName().getAge(); |
或者:
01 |
( function (){ |
02 |
var Dog= function (name,age){ |
03 |
this .name = name; |
04 |
this .age = age; |
05 |
}; |
06 |
Dog.prototype={ |
07 |
getName: function (){ |
08 |
console.log( this .name); |
09 |
return this ; |
10 |
}, |
11 |
getAge: function (){ |
12 |
console.log( this .age); |
13 |
return this ; |
14 |
} |
15 |
}; |
16 |
window.Dogs= function (name,age){ |
17 |
return new Dog(name,age); |
18 |
}; |
19 |
})(); |
20 |
|
21 |
Dogs( "旺旺" ,3).getName().getAge(); |
希望对新手有所帮助,如有不对之处欢迎留言拍砖斧正!
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:Object类相关的属性,方法和操作符 >>
文章信息
- 作者:愚人码头 来源: WEB前端开发
- 标签: 链式调用
- 发布时间:2012-04-07 21:46:19
近3天十大热文
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则