【js】关于原生js链式调用/链式操作的思考

• 在调用接口的时候经常看到 xx.get().then(function(){})，是一种链式结构的实现。 链式结构，也就是多个方法同时被使用的时候可以写成一条函数链执行，实现的基本方式是在每个需要有下一条的函数方法体的最后加上return this;
• 为什么加上return this就能实现链式结构了呢？

举例子的话：

var obj = {
    setA: function () {
        document.write("A");
    },
    setB: function () {
        document.write("B");
    }
}

obj.setA().setB();
复制代码

• 直接放到控制台里运行代码，会出现 Uncaught TypeError: Cannot read property 'setB' of undefined 的报错，同时屏幕上只显示字母A。

• 如果对obj.setA()进行console.log，会得到一个 undefined，这是因为setA这个方法没有返回值。 而如果在setA的方法体结尾加上return this;再对obj.setA()进行console.log，会得到obj对象本身，所以就可以对这个不是undefined的对象进行下一步方法引用了。

• 那么延伸一下，如果这里我们放的不是return this，而是return 别的任意东西呢？例如在这里我们return "C";

var obj = {
    setA: function () {
        document.write("A");
		return "C";
    },
    setB: function () {
        document.write("B");
    }
}

obj.setA().setB();
复制代码

• 可以看出，因为setA()的返回值是一个字符串“C”，这个字符串并没有setB这个方法，所以会直接报错。 由此可见，链式写法不适用于任何本身有return值的方法里。

转载于:https://juejin.im/post/5c088c0251882542026d6f3a