链式调用的核心,就是函数在执行完成后,返回了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