javascript中的链式操作

迈不过友情╰ 2023-10-06 14:30 31阅读 0赞

说到javascript的链式编程,相信很多前端开发者就不由大脑的想到jquery的链式操作.

很多人最早开始接触链式操作，就是从这开始的。

#### **实例代码一:** ####

$(".box").height(200).width(200);

这段代码就是给一个类名称为.box的元素 设置高度,又设置宽度;

#### **实例代码二:** ####

$(".box").height().width();

**实例代码二运行后结果如下:**

![4a6016b583f2487aa11bdd57427548c1.png][]

报错了，说 width 不是一个函数, 这是为什么呢?

明明jquery中有这width这个方法啊

**实际上JQ大致原理是这样的：**

//以下为原理说明，非JQ源码
    
    function $(){
        var obj = 封装...
        return obj;
    }
    $.prototype.width = function(val){
        if(val){
            修改宽度...
            return this;  //当函数有参时，操作完成，返回JQ对象本身
        } else {
            return 宽度;  //当函数无参时，则返回宽度（number类型）
        }
    }
    $.prototype.height = function(val){
        if(val){
            修改高度...
            return this;  //当函数有参时，操作完成，返回JQ对象本身
        } else {
            return 高度;  //当函数无参时，则返回高度（number类型）
        }
    }

**回到代码实例一当中，过程如下图所示：**

在实例代码二中，height()方法是获取元素的高度，它会返回元素的高度，是一个数字。

我们无法对着一个数字调用方法，因此链式调用就中断了，过程如下图：

![47f914ec81ac453c8b907e8715979c82.png][]

**总结:**

> **jquery的链式编程,一般用于设置操作,不能会用于获取操作;**  
> **因为设置操作不必返回设置后的结果,而获取必须返回具体的值;**

**链式调用的核心，就是函数在执行完成后，返回了this，即当前对象**

接下来,我们自己用javascript来练习一下

链式调用

console.log(new Person().setAge(30).getAge()); //报错

**错误提示:没有getAge属性**

我们又把上面的Person构造函数代码改动一下 加上`retrun this`;

//通过原型给 Person构造函数上添加一个设置年龄的方法    
        Person.prototype.setAge=function(num){
                this.age=num;
                return this;
        }

再次运行

console.log(new Person().setAge(30).getAge()); //30

**再次总结**

**javascript的链式编程的核心就是** **`return this`;**

链式编程的优点:

> 代码变得简洁,优雅;

链式编程的缺点:

> 过长的链式,会容易造成操作不明确，难以维护,不利于理解;

> 001-课程介绍

[4a6016b583f2487aa11bdd57427548c1.png]: https://img-blog.csdnimg.cn/4a6016b583f2487aa11bdd57427548c1.png
[47f914ec81ac453c8b907e8715979c82.png]: https://img-blog.csdnimg.cn/47f914ec81ac453c8b907e8715979c82.png