JavaScript中的链式操作

爱被打了一巴掌 2022-11-26 14:57 71阅读 0赞

> **阅读本文，要求熟悉JQ并具备一定的JS基本功，对原型有所了解。**

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

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

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

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

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

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

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

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

![format_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类型）
        }
    }

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

![format_png 1][]

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

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

![format_png 2][]

### **总结:** ###

> **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`;**

链式编程的优点:

> 代码变得简洁,优雅;

链式编程的缺点:

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

[format_png]: /images/20221124/1921f3e41bf7447dac40d39f2a00928a.png
[format_png 1]: /images/20221124/c573443a8cff4282a8d917c1301507ea.png
[format_png 2]: /images/20221124/654157829cf34457be0f07344e5a6be1.png