javascrip函数链式调用Person('Dan').sleep(10).eat('dinner')

本文通过示例代码解析JavaScript中如何实现函数的链式调用,利用数组队列和原型方法,使得Person对象能连续调用sleep和eat方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接上代码
思路:将执行函数放入数组队列,使用next() 执行,将调用函数赋值给构造函数的原型,可以进行连续链式调用,必要:执行功能函数需要返回this

		let index = 0;
        let stack = [];

        function next() {
            let fn = stack[index];
            index++;
            if (typeof fn === 'function') {
                fn();
            }
        }

        function Man(name) {
            stack.push(function () {
                console.log("Hi! This is " + name);
                next();
            })
        }
        var Person = function (name) {
            return new Man(name)
        }
        Man.prototype.sleep = function (time) {
            stack.push(function () {
                setTimeout(function () {
                    console.log("Wake up after " + time)
                    next()
                }, time * 1000)
            })
            return this;
        }
        Man.prototype.eat = function (food) {
            stack.push(function () {
                console.log('Eat ' + food)
                next();
            })
            return this;
        }
        Man.prototype.sleepFirst = function (time) {
            stack.unshift(function () {
                setTimeout(function () {
                    console.log('wake up after ' + time)
                    next()
                }, time * 1000)
            })
            return this;
        }
        // Person('Li')
        /* 输出:
        Hi! This is Hank!
        */
        // Person('Dan').sleep(3).eat('dinner')
        /* 输出:
        Hi! This is Hank!
        // 等待10秒..
        Wake up after 10
        Eat dinner~
        */
        // Person('Jerry').eat('dinner~').eat('supper~')
        /* 输出:
        Hi This is Hank!
        Eat dinner~
        Eat supper~
        */
        Person('Smith').sleepFirst(2).eat('supper')
        /* 等待5秒,输出
        Wake up after 5
        Hi This is Hank!
        Eat supper
        */
        next()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值