链式调用在JavaScript中是如何实现的?

avatar
作者
猴君
阅读量:0
链式调用是指在一个对象的方法返回该对象本身,从而可以连续调用多个方法。,,``javascript,const obj = {, value: 1,, add(num) {, this.value += num;, return this;, },, multiply(num) {, this.value *= num;, return this;, },};,,obj.add(2).multiply(3); // obj.value = 9,``

JavaScript中链式调用之研习-javascript技巧

一、对象链:方法体内返回对象实例自身(this)

单元 说明
ClassA定义function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; }
方法1method1 : function(p1){ this.prop1 = p1; return this; }
方法2method2 : function(p2){ this.prop2 = p2; return this; }
方法3method3 : function(p3){ this.prop3 = p3; return this; }
调用示例var obj = new ClassA(); obj.method1(1).method2(2).method(3);

函数链:对象传入后每次调用返回函数自身

单元 说明
chain函数定义function chain(obj) { return function() { var Self = arguments.callee; Self.obj = obj; if (arguments.length === 0) { return Self.obj; } Self.obj[arguments[0]].apply(Self.obj, slice.call(arguments, 1)); return Self; } }
ClassB定义function ClassB(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; }
方法1method1 : function(p1){ this.prop1 = p1; }
方法2method2 : function(p2){ this.prop2 = p2; }
方法3method3 : function(p3){ this.prop3 = p3; }
调用示例var obj = new ClassB(); chain(obj)('method1',4)('method2',5)('method3',6);

相关问题与解答

问题1: 为什么JavaScript中的链式调用可以减少代码量?

链式调用在JavaScript中是如何实现的?

解答: 链式调用通过在每个方法的末尾返回对象本身(this),使得可以在一个表达式中连续调用多个方法,从而避免了多次书写对象进行“.”或“()”操作,这种方式减少了代码的嵌套层级,提高了代码的可读性。

问题2: 如何在自定义类中实现链式调用?

解答: 要在自定义类中实现链式调用,需要确保类中的每个方法都返回对象本身(this),这样,在一个方法调用后可以继续调用下一个方法,在Calculator类中,add、subtract、multiply和divide方法都返回了this,从而实现了链式调用。

以上就是关于“JavaScript中链式调用之研习-javascript技巧”的问题,朋友们可以点击主页了解更多内容,希望可以够帮助大家!

    广告一刻

    为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!