10分钟白话call、apply、bind八股文

主题：用最简单，通俗白话解说。

目标1：学好一个call小目标，另外2个旁通 so easy

正题入口：

作用1:call 函数的调用 意思是函数的方法(天生从娘的肚子就有这个方法)
实践出真知：
复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>call、apply、bind八股文-白话文解释</title>
    </head>
    <body>
        <script>
            function tiger() {
                console.log('我是一只老虎 只吃肉')
            }
            //验证：函数的调用 输出我是一只老虎 只吃肉
            tiger.call()
        </script>
    </body>
</html>
复制代码

输出：

 

作用2:改变this的身份 (斗转星移，移花接木)
实践出真知：<!DOCTYPE html<html lang="en">
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>call、apply、bind八股文-白话文解释</title>
    </head>
    <body>
        <script>
            function tiger() {
                console.log('我是谁', this)
                console.log('我是一只老虎 只吃肉,我的师傅是' + this.nameInfo)
            }
            function cat() {
                this.nameInfo = '猫'
            }

            //作用2:改变this的指向和身份 (斗转星移，移花接木)
            //输出：我是一只老虎 只吃肉,我的师傅是cat 说明tigger里面的this已经是cat
            //注意这里是实例而不是函数，实例就是要new 对象的，函数获取不到属性。实例才可以
            tiger.call(new cat())
        </script>
    </body>
</html>
复制代码
 
复制代码

输出：

作用3:第一个逗号后面开始是参数
实践出真知：
复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>call、apply、bind八股文-白话文解释</title>
    </head>
    <body>
        <script>
            function tiger(par1) {
                console.log('我是一只老虎 只吃肉,我的师傅是' + this.name + '---参数：' + par1)
            }
            function cat() {
                this.name = '猫'
            }

            //作用3:第一个逗号后面是参数
            // 输出：我是一只老虎 只吃肉,我的师傅是cat---参数：我是参数 (注意此处是函数 name是函数字段的属性 如果要获取属性 要传实例)
            tiger.call(cat, '我是参数')
        </script>
    </body>
</html>
复制代码

输出

 问题1来了？

如果要传递第2个参数，甚至多个参数呢？

不买机关  

tiger.call(cat, '我是参数',"参数2","参数3","参数4","参数N")

问题2来了？

如果参数很多，我想优雅更好的写法，聪明你在想有其他的办法呢，毕竟我们是有dream 、追求的人

不买机关 我的兄弟apply闪亮登场了，你看到我和call的区别了吗？

tiger.apply(cat, ['参数1', '参数2', '参数3', '参数4'])
百科：apply只接受2个参数

休息2分钟...........................

最后一个bind老表， 姗姗来迟上台，蓦然回首,bind却在灯火阑珊处，有了call，兄弟，怎么还有老表呢？。现在政策截止2025是开发3胎了。

言归正传：

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>call、apply、bind八股文-白话文解释</title>
    </head>
    <body>
        <script>
            function tiger(par1) {
                console.log('我是一只老虎 只吃肉,我的师傅是' + this.name + '---参数：' + par1)
            }
            function cat() {
                this.name = '猫'
            }

            //tiger.call(cat, '参数1') 等价于 ,其他一模一样
            var bindObj = tiger.bind(cat, '参数1')
            bindObj()
        </script>
    </body>
</html>
复制代码

 专业术语：call是立即执行函数方法，bind先缓存起来(备用，备胎)，待有需要用到在调用。

10分钟时间过完了，今天的故事白话文到此为止谢幕。下一站，下一篇在哪呢？

用通俗话记录通俗的语言，讲解内心的语言的故事，

用处：一般封装一类类库，方法，框架 使用的多。

posted @   s_p  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript 回调函数，异步知识点
·  使用call、apply和bind改变函数执行时的上下文
·  call()、apply()、bind() 的用法
·  apply、call、bind的区别，这可能是全网最简单的区分方法
·  三句话说清楚call、apply、bind区别
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
历史上的今天：
2013-01-10 jquery 相关操作笔记
点击右上角即可分享
微信分享提示
AI IDE Trae