Javascript中的方法链式调用

前言

方法的链式调用这个概念，其实是在面向对象编程中比较常见的语法，它能让使用者在一个对象上连续的调用不同的方法。在不使用临时变量存储中间结果的情况下完成一条语句上多个方法的连续调用。

在使用jquery的过程中，会经常用到链式调用，比如：

$('#forevercjl').addClass('px').removeClass('xp');

下面我们就用一个简单计算器对象例子，来模拟实现这样的链式调用。

为链式调用创建一个对象

首先我们用函数创建一个对象：

const calObj = function(){}

由于是计算器对象，那么它需要包含以下属性和方法

• num 属性，用于存储当前计算器的结果值
• add 方法，给num加值
• min 方法，给num减值
• clear 方法，num置0

代码如下：

const calObj = function(){
	this.num = 0;
	
	this.add = function(number){
		this.num = this.num + number;
	}
	
	this.min = function(number){
		this.num = this.num - number;
	}
	
	this.clear = function(){
		this.num = 0;
	}
}

然后尝试调用一下，实现0+1的效果

const co = new calObj();
co.add(1); //1

如果我们在调用完add方法，还想继续减一个数，实现 0+1-2的效果，那应该这样写：

const co = new calObj();
co.add(1).min(2); //Uncaught TypeError: Cannot read property 'min' of undefined at <anonymous>:2:10

执行完上面代码后，会发现直接报错了，提示找不到min方法。

为什么报错?

在上面定义的calObj对象的add方法中，我们并没有显示的指定其返回值，所以实际上他在执行完之后，会返回undefined。在undefined上调用min方法，那必然会报错。

解决方法

如果想要在调用add方法之后，又可以立即调用min方法，其实只需要给add方法增加一个return this就行了。就是这么简单，把对象自身的引用返回出去。

const calObj = function(){
	this.num = 0;
	
	this.add = function(number){
		this.num = this.num + number;
		return this;
	}
	
	this.min = function(number){
		this.num = this.num - number;
		return this;
	}
	
	this.clear = function(){
		this.num = 0;
		return this;
	}
}

这个时候我们调用任何一个方法，都会返回对象本身

const co = new calObj();
console.log(co.add(1)); 

现在无论调动哪个方法，都可以通过链式写法继续调用对象的其他方法，直到你不想再调用为止。

回到前面说的到0+1-2的实现代码，现在就能正常调用了：

const co = new calObj();
co.add(1).min(2); //-1

使用闭包实现链式调用

在不使用new的情况下，能否实现链式调用呢？答案必然是可以的，只需要利用闭包就能实现。

const calObj = function(){
	let num = 0;
	
	let add = function(number){
		num = num + number;
		return this;
	}
	
	let min = function(number){
		num = num - number;
		return this;
	}
	
	let clear = function(){
		num = 0;
		return this;
	}	
	return {
		add,
		min,
		clear
	}	
}

这样就可以不用new一个obj来使用链式调用了。

const co = calObj();
co.add(1).min(2);  //-1