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

1,628 阅读1分钟
  • 在调用接口的时候经常看到 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值的方法里。