LazyMan题目讲解

题目是从知乎上看到的：https://zhuanlan.zhihu.com/p/28892523?utm_medium=social&utm_source=qq

一、题目

实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

以此类推。

二、解题思路

1.整体是一个js的面向对象编程的题目
2.涉及到异步控制的思想
3.执行顺序不同于调用顺序
4.可以考虑内部维护一个数组控制调用顺序
5.可以考虑使用Promise实现
6.可以考虑使用async实现

三、解题代码实现

1.ES5原生代码实现——个人手打调试

    function Man(name) {
        this.actions = [];
        this.current = 0;

        var helloFunc = function () {
            console.log("Hi This is " + name + "!");
            this.act();
        }.bind(this)

        this.addAction(helloFunc);

        setTimeout(function () {
            this.act();
        }.bind(this), 0);
    }

    // 调用下一个动作
    Man.prototype.act = function () {
        var actions = this.actions;
        return actions[this.current] && actions[this.current++]();
    }

    // 向动作队列添加动作
    Man.prototype.addAction = function (func, isFirst) {
        if (!isFirst) {
            this.actions.push(func);
        } else {
            this.actions.unshift(func);
        }
    }

    // 休眠
    Man.prototype.sleep = function (time) {
        var sleepFunc = function () {
            setTimeout(function () {
                console.log("Wake up after " + time + "ms");
                this.act();
            }.bind(this), time)
        }.bind(this);
        this.addAction(sleepFunc);
        return this;
    }

    // 吃饭
    Man.prototype.eat = function (food) {
        var eatFunc = function () {
            console.log("Eat " + food + "~");
            this.act();
        }.bind(this);
        this.addAction(eatFunc);
        return this;
    }

    // 睡觉优先
    Man.prototype.sleepFirst = function (time) {
        var sleepFirstFunc = function () {
            setTimeout(function () {
                console.log("Wake up after " + time + "ms");
                this.act();
            }.bind(this), time)
        }.bind(this);
        this.addAction(sleepFirstFunc, true);
        return this;
    }

    function LazyMan(name) {
        return new Man(name);
    }

重点代码解析

    var helloFunc = function () {
        console.log("Hi This is " + name + "!");
        this.act();
    }.bind(this)

如果不使用.bind(this)那么this指向哪里？答案是 this.actions

为什么会出现这种情况呢？
javascript的this指向执行时的上下文对象
那么this.act()何时执行呢？答案是

    return actions[this.current] && actions[this.current++]();

所以必须使用.bind(this)改变this的指向

简化版可以参考这个代码：

    var a = [0,1,2,function(){console.log(this)}];
    a[3]();

    输出结果为：[0, 1, 2, ƒ]

2.ES6语法实现——ES6对this的控制简直完美，会ES5的实现ES6简直so easy

    class Man{
        constructor(name){
            this.actions = [];
            this.current = 0;

            var helloFunc = () =>{
                console.log("Hi This is " + name + "!");
                this.act();
            }

            this.addAction(helloFunc);

            setTimeout(() =>{
                this.act();
            }, 0)
        }

        act(){
            var actions = this.actions;
            return actions[this.current] && actions[this.current++]();
        }

        addAction(func, isFirst){
            if(!isFirst){
                this.actions.push(func)
            }else{
                this.actions.unshift(func)
            }
        }

        eat(food){
            var eatFunc = () =>{
                console.log("Eat " + food + "~");
                this.act();
            }

            this.addAction(eatFunc)
            return this;
        }

        sleep(time){
            var sleep = () =>{
                setTimeout(() => {
                    console.log("Wake up after " + time + "ms");
                    this.act();
                }, time)
            }

            this.addAction(sleep);
            return this;
        }

        sleepFirst(time){
            var sleepFirst = () =>{
                setTimeout(() =>{
                    console.log("Wake up after " + time + "ms");
                    this.act();
                }, time)
            }

            this.addAction(sleepFirst, true)
            return this;
        }
    }
    function LazyMan(name) {
        return new Man(name)
    }

3.Promise语法实现——知乎网友南塔托给出的答案

对于这个答案我只能说如此精辟的解法要给一个大大的赞，使我对Promise的认识更深了一层。

    class Lazy {
        constructor(name) {
            this.sleepFirstTime = 0;
            this.promise = Promise.resolve().then(
                () => this.sleepFirstTime && this._sleep(this.sleepFirstTime)
            ).then(() => {
                console.log(`Hi! This is ${name}!`);
            });
        }
        sleepFirst(time) {
            this.sleepFirstTime = time;
            return this;
        }
        eat(food) {
            this.promise = this.promise.then(() => {
                console.log(`Eat ${food}~`);
            });
            return this;
        }
        sleep(time) {
            this.promise = this.promise.then(() => this._sleep(time));
            return this;
        }
        _sleep(time) {
            return new Promise((next) => {
                setTimeout(() => {
                    console.log(`Wake up after ${time}`);
                    next();
                }, time);
            });
        }
    }

    function LazyMan(name) {
        return new Lazy(name);
    }

重点代码解析

    constructor(name) {
        this.sleepFirstTime = 0;

        // Promise.resolve()创建一个Promise对象执行后面的函数
        this.promise = Promise.resolve().then(

        // this.sleepFirstTime为0时后面的函数不会执行
            () => this.sleepFirstTime && this._sleep(this.sleepFirstTime)
        ).then(() => {
            console.log(`Hi! This is ${name}!`);
        });
    }

假设执行该函数
LazyMan(“Hank”).sleepFirst(2000).sleep(2000).eat(“supper”)

【注意】构造函数初始化时仅执行了this.promise = Promise.resolve()
此时的this.promise仅仅是一个Promise对象
.then会在.eat("super")结束后才调用
然后.sleepFirst等函数对this.promise进行了改造
最后各种.then方法会链式调用达到所需效果