挑战前端基础120题--JavaScript 中如何实现链式调用的函数?

一. 何为链式调用？

链式调用是一种简化过程的编码方式，使代码看起来更加简洁～它允许你通过在方法调用之间返回对象本身，从而连续地调用多个方法；比较常见的链式调用：jQuery, Promise等，通过多次书写.或()操作来调用。

二. 实现的原理？

每次执行完成后返回自己/新的自己，这样可以确保后续的方法仍然在当前环境下执行；

三. 如何实现？

let p = {
  then() {
     console.log('输出-->then');
     return this;
  }
}
console.log(p.then().then());

 

function myPromise () {
    return this;
}
myPromise.prototype.then = function () {
    console.log('my promise');
    return new myPromise(); // this
}

let myP1 = new myPromise();
console.log(myP1.then().then().then())

 四. 深入理解下Promise链式调用的规则？

let pro = new Promise((resolve, reject) => {
    resolve('我是一个promise对象')
})
console.log(pro); // Promise
pro.then(res => {
    console.log(res); // 我是一个promise对象
}).then(res => {
    console.log(res);  // undefined
    return 123;
}).then(res => {
    console.log(res); // 123
    return new Promise(resolve => {
        resolve('456')
    })
}).then(res => {
    console.log(res); // 456
}).then(res => {
    console.log(res); //undefined
}).then(res => {
    console.log(res); // undefined
    return '我是直接返回的结果';
}).then()
    .then('我是字符串').
    then(function (res) {
    console.log(res); // 我是直接返回的结果
})

总结：

1. 只要有then() 并且触发了resolve，链式就会执行到结尾，res 就是为resolve参数传入的值；

2. 每个函数也可以使用return返回值，没有的话后续下一个then中回调函数的值默认undefined；

3. 返回值如果是一个普通值，则直接传递到下个then，如果是一个Promise对象,那么此Promise对象的resolve传入的值就会被当作后续下一个then中回调函数的值；

4. 如果then中传入的值不是回调函数或者没有传递值，链式调用并不是中断，而是继续往下执行，这是后面获取到的res为最后一次return/resolve传入的值；