Js之链式调用

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

/*
 * @Author: shape
 * @Date: 2021-07-26 14:03:45
 * @LastEditors: shape
 * @LastEditTime: 2021-07-26 14:51:15
 * @Description: 链式调用类
 * @FilePath: \ht-vue-frame\src\utils\chain.js
 */

class Person {
  constructor(props) {
    this.age = 18;
    console.log('props', props);
    this.name = props.name;
  }

  setAge(data) {
    this.age = data;
    return this; // 函数执行完后, 返回this, 即当前对象
  }

  getAge() {
    console.log('in class, name is', this.name);
    return this.age;
  }
}

export default Person;

const person = new Person({ name: 'shape' }); // 实例化Person类，传入name属性
console.log('person instance, age is', person.setAge(20).getAge());

总结：

js链式调用的核心是return this

优点：代码变得简洁、优雅。

缺点：过长的链式，会造成操作不明确，难以维护。

参考：

https://zhuanlan.zhihu.com/p/110512501

https://www.kancloud.cn/digest/js-patterns/153945