資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中的方法鏈式呼叫
方法或函式鏈式呼叫是 JavaScript 中一種流行的方法，用於編寫更簡潔易讀的程式碼。在本文中，我們將討論 JavaScript 中方法鏈式呼叫的方法，以及它如何工作。
在一些使用 jQuery 或其他包編寫的 JavaScript 程式中，有時我們會在一行中連續呼叫多個函式。這可以透過以下簡單的示例來解釋：
語法
ob = <some object> ob.method_1().method_2().(some more methods).method_n()
示例
不使用方法鏈式呼叫。
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"></div> <div id="opError" style="color : #ff0000"></div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { let s = 'HELLO World JavaScript is Awesome' s = s.toLowerCase() s = s.replace(/ /g, '|') // globally replace all spaces with | s = s.trim() content += "Value of s: " + JSON.stringify(s) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
示例
使用方法鏈式呼叫 -
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { let s = 'HELLO World JavaScript is Awesome' s = s.toLowerCase().replace(/ /g, '|').trim() content += "Value of s: " + JSON.stringify(s) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
示例
使用方法鏈式呼叫，但以不同的行書寫 -
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { let s = 'HELLO World JavaScript is Awesome' s = s .toLowerCase() .replace(/ /g, '|') .trim() content += "Value of s: " + JSON.stringify(s) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
我們可以對陣列應用相同的方法，當我們想要連續使用幾個陣列方法時。讓我們看看以下陣列上方法鏈式呼叫的示例。
示例
在陣列物件上（不使用方法鏈式呼叫）
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { let arr = [10, 70, 30, null, 80, null, 0, null, '50', 150] arr = arr.filter(e => typeof e === 'number' && isFinite(e)) arr = arr.sort((x, y) => x - y) content += "The array elements are, after filtering: " + JSON.stringify(arr) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
示例
在陣列物件上（使用方法鏈式呼叫） -
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { let arr = [10, 70, 30, null, 80, null, 0, null, '50', 150] arr = arr .filter(e => typeof e === 'number' && isFinite(e)) .sort((x, y) => x - y) content += "The array elements are, after filtering: " + JSON.stringify(arr) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
JavaScript 中的非同步函式使用 Promise 來工作。Promise 是方法鏈式呼叫領域中一個很好的例子。要實現 Promise，我們首先需要建立 Promise，然後建立相應的處理函式。我們需要這些處理函式來處理 Promise 解析後的值。
示例
使用 Promise
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { // Create a new Promise object const p = new Promise((resolve, reject) => { // make a delay setTimeout(function () { // Resolve the promise by returning a message resolve('Message After Promise') }, 1000) }) .then( function (data) { content += "Data coming after resolving promise: " + JSON.stringify(data) + '<br>'; opDiv.innerHTML = content }) .catch(err => error += "Error Message: " + JSON.stringify(err) + '<br>') } catch (err) { error += err } finally { // display on output console opErrDiv.innerHTML = error } </script> </body> </html>
在 JavaScript 中建立自己的物件以進行方法鏈式呼叫
在前面的幾個示例中，我們已經看到了如何在 JavaScript 程式中應用方法鏈式呼叫。現在我們將介紹如何為我們的物件實現相同的功能。在這個示例中，我們將建立一個類型別，其中包含多個函式，並且可以透過方法鏈式呼叫來使用它們。
對於方法鏈式呼叫，“this”關鍵字起著實際的作用。眾所周知，“this”關鍵字指向當前正在使用的物件。
示例
使用 Promise
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { const person = { name: 'Alice', age: 25, state: null, currentState() { content += "The current state: " + JSON.stringify(this.state) + '<br>' }, eatFood() { this.state = 'Eating food.' this.curentState() return this }, playCricket() { this.state = 'Playing Cricket' this.currentState() return this }, sleep() { this.state = 'Now Sleeping.' this.currentState() return this }, jump() { this.state = 'Jumping High.' this.currentState() return this }, walk() { this.state = 'Morning Walking.' this.currentState() return this }, doWork() { this.state = 'Doing my work.' this.currentState() return this } } person .sleep() .walk() .jump() .eatFood() .doWork() .sleep() } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
在這個示例中，我們可以看到函式使用“this”關鍵字返回當前物件。如果沒有使用它，則不符合方法鏈式呼叫的條件。在上面的示例中，person 類包含一個名為 state 的成員變數。每當我們呼叫類中給定的任何函式時，都會更新此狀態。最後，它們透過方法鏈式呼叫來一次性執行所有操作。
結論
方法鏈式呼叫是 JavaScript 中一個有趣的特性，它有助於減少程式碼量並提高程式碼的可讀性。在方法鏈式呼叫中，我們像鏈一樣呼叫單個物件的單獨方法，而無需透過賦值運算子多次賦值給同一個物件。當我們使用帶有 Promise 的非同步函式時，方法鏈式呼叫效果很好。有時我們從網路獲取資料，這些資料與我們的程式碼不同步。我們必須等待一段時間。在這種情況下，主要會有兩種不同的情況，一種情況是我們在處理輸入後說明將要做什麼，另一種情況是在發生錯誤時執行所需的操作。
更新於: 2022年8月23日
8K+ 閱讀量
廣告