javascript实例自学手册光盘源码_JavaScript中的链式操作

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

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

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

实例代码一:

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

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

实例代码二:

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

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

报错了，说 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()方法是获取元素的高度，它会返回元素的高度，是一个数字。

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

总结:

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

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

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

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

链式调用

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;

链式编程的优点:

代码变得简洁,优雅;

链式编程的缺点:

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

此文转载自：

千锋HTML5学院

原文链接：

千锋HTML5学院：javascript中的链式操作

---

Eric：什么是闭包？​zhuanlan.zhihu.com

Eric：详解JavaScript严格模式​zhuanlan.zhihu.com