什么是 JavaScript 中的函数链?
javascriptobject oriented programmingprogramming
函数链
函数链只不过是使用点符号将函数分组到一行中。这种类型的链式结构使代码非常简洁,同时也提高了性能。这里我们将学习使用常规对象的函数链。
a) 没有函数链
在下面的例子中,创建了一个对象"obj",并在该对象中使用关键字"this"创建了一个名为"i"的公共属性,并最初分配了值 0。稍后,在同一个对象"obj"内创建了名为 add()、subtract() 和 print() 的用户定义函数。现在,对象"obj"将像一个类一样运行(它的属性可以被其他对象共享)。
现在使用关键字"new"创建了一个名为"x"(用户定义)的对象,并使其能够使用对象"obj"的属性。由于在"obj"内部声明的函数(例如 add()、subtract() 和 print())不会返回,因此无法进行函数链,并且会显示undefined 作为输出,而单独(未链接)这些函数将执行输出为 3(用户提供的"5-2")。
示例
<html> <body> <script> var obj = function(){ this.i = 0; this.add = function(i){ this.i += i; }; this.subtract = function(i){ this.i -= i; }; this.print = function(){ document.write(this.i); document.write("</br>"); document.write(x.add(3)); // 返回未定义 } } var x = new obj(); x.add(5); x.subtract(2); x.print(); // 5-2 = 3 所以打印 3。 x.add(5).subtract(2).print(); // 函数链式调用不可行,因此未定义 </script> </body> </html>
输出
3 未定义
b) 使用函数链式调用
在下面的例子中,考虑上述示例场景,使用用户定义的"return this"语句,返回诸如 add() 和 subtract() 之类的函数,并通过显示 3 作为输出,使函数链式调用成为可能。
示例
<html> <body> <script> var obj = function(){ this.i = 0; this.add = function(i){ this.i += i; return this; }; this.subtract = function(i){ this.i -= i; return this; }; this.print = function(){ document.write(this.i); } } var x = new obj(); x.add(5).subtract(2).print(); </script> </body> </html>
输出
3