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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/198267.html
標籤：AI