本文深入解析JavaScript面向对象程序设计中的链式调用机制。通过jQuery示例说明链式调用的概念，阐述其核心在于方法返回当前对象实例。提供了基于$选择器的完整实现代码，并附带数组map与reduce链式操作的演示，帮助开发者掌握这一常用编程技巧。
本文通过具体实例解析JavaScript面向对象程序设计中的链式调用技术，旨在为读者提供清晰的参考与学习材料。
链式调用的概念与jQuery示例
1. 链式调用的概念：
jQuery是目前广泛使用的JavaScript框架，开发者通常习惯于如下形式的代码编写方式：
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
这种连续调用的方式被称为链式调用。其含义是，在执行完一个方法后，可以利用该方法的返回值继续调用后续的方法。
链式调用的实现原理与代码示例
2. 链式调用的实现方法：
了解了什么是链式调用，我们再来看如何实现链式调用，从1中所述我们应该知道链式调用的关键在于方法的返回值，只要方法的返回值都是调用该方法的对象，那么，我们就可以实现链式调用了，我们仿照jquery，使用$作为对象的选择器：
(function(){
function _$(els){
this.elements = [];
for(var i=0, len=els.length;i<len;i++){
var elements = els[i];
if(typeof element = ‘string'){
element = document.getElementByIdx_x_x(element);
}
}
this.elements.push(element);
}
_$.prototype = {
each:function(fn){
for(var i=0,len=this.elements.length;i<len;i++){
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, val){
……
},
show:function(){
……
},
……
}
window.$ = function(){
return new _$(arguments);
}
})();
上述代码实现了一个基础的链式调用对象。此外，代码中使用_$作为$的别名，目的是防止$变量被其他脚本覆盖，从而避免整个对象定义失效。
附：一个简单的链式调用示例代码：
/*
map()
items 遍历的数组的每一项
*/
var arr = [1,2,3];
var num = arr.map(function(items){
return items + 1;
});
console.log(num);//[2,3,4 var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9]
/*
reduce 实现数组里的每个数相加,也就是给数组的每一项求总和
reduce(function(a,b){
return a+b;
},a)--a的初始值
*/
var arr = [1,2,3];
var num_1 = arr.reduce(function (a,b) {
return a+b;
})
console.log(num_1);//6
/*
链式调用
一个链子接一个链子
*/
var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9
感兴趣的读者可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 来测试上述代码的运行效果。
如需了解更多JavaScript相关内容，推荐查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文的内容能对各位的JavaScript程序设计工作有所帮助。