JS链式调用 -- ES6 类实现

简单实现js链式调用

相信大家在使用jquery的时候一定见过这样的代码：

$('').addClass().siblings().removeClass().......后面接着一大串

那么用原生JS的方式该怎样实现呢？

let xiaoma = new Person('小马')

xiaoma .sayHi().await(2).play('英雄联盟').await(5).play('亚索')

// 内容输出

// 我叫小马

// 第2s

// 我在玩英雄联盟

// 第5秒

// 我在玩亚索

代码截图：

 

代码如下

// 声明类

    class Person {

        constructor(name) {

            this.name = name

            // 创建数组存放执行函数

            this.task = []

            console.log('内容输出')

            setTimeout(() => {

                this.next()

            }, 0)

        }

        sayHi() {

            let fn = () => {

                console.log('我叫' + this.name)

                this.next()

            }

            // 每次创建函数之后都往数组里追加

            this.task.push(fn)

            //  链式调用的重点*** return this

            return this

        }

        next(time) {

            // 每次执行都删除数组的第一项，shift()返回的是  删除的值

            let fn = this.task.shift()

            time && console.log('第' + time + 's')

            fn && fn()

        }

        await(time) {

            let fn = () => {

                setTimeout(() => {

                    this.next(time)

                }, time * 1000)

            }

            this.task.push(fn)

            return this

        }

        play(game) {

            let fn = () => {

                console.log('我在玩' + game)

                this.next()

            }

            this.task.push(fn)

            return this

        }

    }

    let xiaoma = new Person('小马')

    xiaoma.sayHi().await(2).play('英雄联盟').await(5).play('亚索')

链式调用的核心就是将函数体中的 this  作为函数返回值  

构造函数的实现思路也差不多，把方法绑定在构造函数的原型上即可！

代码编写考虑得并不周全，只是简单的提供一个实现思路......