JavaScript链式调用

最新推荐文章于 2025-03-18 09:26:38 发布

hsany330

最新推荐文章于 2025-03-18 09:26:38 发布

阅读量6.6k

点赞数 8

原文链接：https://cloud.tencent.com/developer/article/1410779

版权

本文详细解释了链式调用的概念及其在JavaScript中的应用。通过对比一般函数调用，介绍了链式调用如何通过return this实现，使得代码更加简洁、易读，并避免了多次重复使用对象变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是链式调用？

这个很容易理解，例如

$('text’).setStyle('color', 'red').show();

一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。

首先，我们先来看看一般函数的调用方式

（1）先创建一个简单的类

//创建一个bird类

function Bird(name) {
        this.name=name;
        this.run=function () {
        document.write(name+" "+"start run;");
                }
        this.stopRun=function () {
         document.write(name+" "+"start run;");
                }
        this.sing=function () {
            document.write(name+" "+"start sing;");
        }
        this.stopSing=function () {
            document.write(name+" "+"start stopSing;");
        }
    }

（2）使用方式：一般的调用方式

 var bird=new Bird("测试");
    bird.run();
    birdbird.sing();
    bird.stopSing();
    bird.stopRun();

（3）总结，该种方式有一个弊端就是：多次重复使用一个对象变量

然后，我们再来看看将上述改成链式调用的格式

（1）在创建的简单类中加上return this，如下

//创建一个bird类

 function Bird(name) {
        this.name=name;
        this.run=function () {
            document.write(name+" "+"start run;");
            return this;// return this返回当前调用方法的对象。
        }
        this.stopRun=function () {
            document.write(name+" "+"start run;");
            return this;
        }
        this.sing=function () {
            document.write(name+" "+"start sing;");
            return this;
        }
        this.stopSing=function () {
            document.write(name+" "+"start stopSing;");
            return this;
        }
    }

（2）使用链式调用（连缀的方式）

var bird=new Bird("测试");
    bird.run().sing().stopSing().stopRun();//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

（3）总结此种方式的调用结果与一般的调用方式产生的结果一样，优点是：链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量