前端笔记之手写call

前言

大家好 我是歌谣 上节课我们已经说过了关于手写apply和手写call的讲解 这节课我们继续来进行手写bind的讲解

bind演示

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写bind.html</title>
</head>
<body>
    <script>
         var geyao = {
            name: "geyao",
            show() {
                console.log(this, "this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang = {
            name: "fangfang"
        }
        let fn=geyao.show.bind(fangfang)
        fn()
    </script>
</body>
</html>

运行结果

分析

核心的功能就是第一会改变this的指向 第二函数不会立刻执行

代码

javascript 复制代码
 var geyao = {
            name: "geyao",
            show() {
                console.log(this, "this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang = {
            name: "fangfang"
        }
        Function.prototype.myBind = function (content, args) {
            
            let fn = Symbol('geyao')
            fn = this
            return function Fn() {
                // 这里arguments的作用是拿到Fn中传入的参数
                return fn.call(content, args)
            }
        }
        let fn = geyao.show.myBind(fangfang)
        fn()
      

运行结果

思考

这里还需要对new bind进行一个实现 不是上述所说的这么简单

ini 复制代码
  function geyao() {
            this.fangfang = 'fangfang';
        }
        var geyaoFoo = geyao.bind();
        var obj = new geyaoFoo();
        console.log(obj.fangfang); 

运行结果

最终代码

bash 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写bind2.html</title>
</head>
<body>
    <script>
        Function.prototype.myBind = function (context, ...args) {
            let geyao = Symbol('geyao')
            geyao = this
            return function Fangfang() {
                if (this instanceof Fangfang) {
                    return new geyao(...args, ...arguments)
                }
                return geyao.call(context, arguments)
            }
        }
        function geyao() {
            this.fangfang = 'fangfang';
        }
        var geyaoFoo = geyao.myBind();
        var obj = new geyaoFoo();
        console.log(obj.fangfang);
    </script>
</body>

</html>

运行结果

相关推荐
昔人'6 分钟前
css`text-wrap:pretty`
前端·css
绝无仅有6 分钟前
面试真实经历某商银行大厂Java问题和答案总结(七)
后端·面试·github
勇敢di牛牛11 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
绝无仅有12 分钟前
面试真实经历某商银行大厂缓存Redis问题和答案总结(一)
后端·面试·github
詩句☾⋆᭄南笙21 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒34 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌39 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip44 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙1 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm