JavaScript 中的方法链
front end technologyjavascriptobject oriented programming
方法或函数链是 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
<!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 中的一个有趣功能，它有助于减少代码大小并提高代码的可读性。在方法链中，我们像链一样调用单个对象的单独方法，而无需通过赋值运算符多次分配同一个对象。当我们将异步函数与承诺一起使用时，方法链效果很好。有时我们从与我们的代码不同步的网络获取数据。我们必须等待一段时间。在这种情况下，主要有两种不同的情况，一种情况下我们提到处理输入后将做什么，另一种情况下如果发生错误则执行所需的操作。
