JavaScript鏈式呼叫
最近一直在學習JavaScript鏈式呼叫這塊的東西，所謂的鏈式呼叫，簡單粗暴的講，就是在一個實體物件呼叫完一個方法后，在后邊可以一直去呼叫其他方法，例如，Promise.then()的方法就是一個很好的例子，他可以在后邊一直的.then下去，
以下是個人的一些淺理解！！！不是很透徹！！！
那么，鏈式呼叫究竟是如何實作的，個人理解：對于同步的鏈式呼叫，主要是與對應方法的回傳值有關，接下來我們直接上代碼
/* 簡單的鏈式呼叫 */
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
info() {
console.log(`${this.age}的${this.name}`);
return this
}
start() {
console.log('開始起床！');
return this
}
eat() {
console.log('開始吃飯');
return this
}
school() {
console.log('開始上學！');
return this
}
sleep() {
console.log('開始睡覺');
return this
}
}
const person = new Person('小紅', 36)
person.info().start().eat().school().sleep()
//36的小紅
//開始起床！
//開始吃飯
//開始上學！
//開始睡覺
觀察以上的代碼，不難發現，在每一個方法上將this回傳，也就是指向的是對應的實體物件，然后就可以一直去呼叫之后的方法，
那么，如果代碼中有了一定的異步任務，此時的話，直接回傳this是遠遠不夠的，如果直接呼叫的話，它可能不會按照代碼的呼叫順序去列印結果，而是按照瀏覽器的事件回圈機制去執行相關代碼，接下來我們上代碼來看一下：
/* 如果加上異步代碼那該如何實作 */
function Man(name) {
this.name = name
// 創建一個陣列模擬任務佇列
this.queue = []
// 用延遲器開啟一個事件的總線
setTimeout(() => {
// 呼叫next
this.next()
}, 0)
// 將this回傳
return this
}
Man.prototype.next = function () {
// 將佇列中的第一個任務彈出
let fn = this.queue.shift()
// 如果有任務的話就進行呼叫
fn && fn()
}
Man.prototype.sayHello = function () {
let fn = () => {
console.log('您好，我叫' + " " + this.name);
this.next()
}
// 將該任務添加到佇列當中
this.queue.push(fn)
return this
}
Man.prototype.eat = function (time) {
let fn = () => {
setTimeout(() => {
console.log(`吃飯花費了 ${time}s`);
}, time * 1000)
this.next()
}
this.queue.push(fn)
return this
}
let man = new Man('張娜')
man.sayHello().eat(5)
以上代碼中的eat方法，內容是5s后才輸出的，
首先我們創建了一個Man的建構式，然后在其內部創建了一個陣列用來模擬控制異步事件，完后建構式中的setTimeout是任務佇列的事件總線，負責去呼叫next方法，
在next方法中，我們首先將佇列中的第一個任務彈出保存，然后在任務存在的時候去執行它，
然后在每一個對應的方法內部去創建一個函式，用來保存對應的功能，功能函式創建完成后需要將其壓入到佇列當中，然后將this回傳，通過這種方式，然后完成鏈式的呼叫！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341909.html
標籤：其他
下一篇：forEach方法如何跳出回圈