链式调用思迷

Jquery的链式调用

谈到链式调用，最首先想到的是Jquery
在jQuery中，如果一直对同一个元素进行操作，那么可以使用.语法(点语法),一直写下去，如 :

$("#div").css("background","skyblue").css("font-size": "14px")

实现链式调用

实现链式调用的核心在于return this,看如下代码:

lazyMan = {
    sleep() {
        console.log('sleep')
        return this
    },
    eat() {
        console.log('eat')
        return this
    },
    study() {
        console.log('study')
        return this
    }
}

lazyMan.sleep().eat().study() // sleep eat study

//将上述代码看成这样  
let temp 
temp = lazyMan.sleep() // return this 所以temp指向了lazyMan
temp = temp.eat() // return this 所以temp指向了lazyMan
temp = temp.study() // return this 所以temp指向了lazyMan

this总是返回调用当前函数的对象,当我们把函数封装在对象中时，在函数中return this返回的是当前调用这个函数的对象，因此返回的是lazyMan
在Javascript中对象是作为引用被传递的，所以可以继续调用下去，只要函数中返回的是this,这个链式调用就可以一直进行

再看如下代码:

calc = {
    i: 0,
    init(n) {
        this.i = n;
        return this;
    },
    add(n) {
        this.i += n;
        return this
    },
    minus(n) {
        this.i -= n;
        return this
    },
    multiply(n) {
        this.i *= n;
        return this
    },
    result() {
        return this.i
    }
} 
calc.init(3).add(5).multiply(12).minus(100).result() //-4

实现的原理同上。通过这两个例子，对Jquery链式调用的实现是不是也有点感觉了

总结

1、实现链式调用的核心，是对象中的每一个方法都会返回当前对象。

let 对象 = {
  方法名(){
   ...
   return this // 链式调用核心
  }
}

2、在方法中,js提供一个this的关键字，表示当前对象

参考链接
链接1
链接2