数据结构
网络
关系型数据库管理系统 (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+ 阅读量
广告