前端扫盲202307手写call

爱学习的前端歌谣

发布于 2023-10-18 11:07:35

1410

发布于 2023-10-18 11:07:35

文章被收录于专栏：前端小歌谣

前言

大家好我是歌谣最近开始进行前端的知识扫盲的讲解今天要给大家带来的是手写call的一个讲解

call用法

需求是我们要将绑定的geyao的对象变成绑定为fangfang

 var geyao={
            name:"geyao",
            show(){
                console.log(this,"this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang={
            name:"fangfang"
        }
         geyao.show()
       geyao.show.call(fangfang)

控制台输出

简单小结

call有两个作用第一调用他的函数并且要求他能够立刻执行第二就是改变了一下他的this指向

封装自己的简单call函数

   var geyao={
            name:"geyao",
            show(){
                console.log(this,"this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang={
            name:"fangfang"
        }
       Function.prototype.GeyaoCall=function (content){
            content.show=this
            this.show()
       }
       geyao.show.GeyaoCall(fangfang)

运行结果

小结

这样简单的一个call就被我们实现了但是一些缺陷我们还需要优化实现 call没有参数的时候this会指向window call可以传递多i个参数加入属性会增加他的属性这些都是我们需要解决的于是乎我们将传递的参数变为两个参数

继续优化

 var geyao = {
            name: "geyao",
            show() {
                console.log(this, "this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang = {
            name: "fangfang"
        }


        Function.prototype.GeyaoCall = function (content, ...arguments) {
            //解决没有参数 就是window的问题
            content = content || window
            //定义唯一值
            let unique=Symbol()
            content[unique]=this
            //解决传递多个参数的问题
            content[unique](...arguments)
            //删除多余属性
            delete content[unique]
        }
        geyao.show.GeyaoCall(fangfang)

运行结果

测试没有参数

var geyao = {
            name: "geyao",
            show() {
                console.log(this, "this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang = {
            name: "fangfang"
        }
        var test = {
            name: "test"
        }


        Function.prototype.GeyaoCall = function (content, ...arguments) {
            //解决没有参数 就是window的问题
            content = content || window
            //定义唯一值
            let unique=Symbol()
            content[unique]=this
            //解决传递多个参数的问题
            content[unique](...arguments)
            //删除多余属性
            delete content[unique]
        }
        geyao.show.GeyaoCall()

运行结果

测试多个参数

 var geyao = {
            name: "geyao",
            show() {
                console.log(this, "this")
                console.log(` 我是${this.name}`)
            }
        }
        var fangfang = {
            name: "fangfang"
        }
        var test = {
            name: "test"
        }


        Function.prototype.GeyaoCall = function (content, ...arguments) {
            //解决没有参数 就是window的问题
            content = content || window
            //定义唯一值
            let unique=Symbol()
            content[unique]=this
            //解决传递多个参数的问题
            content[unique](...arguments)
            //删除多余属性
            delete content[unique]
        }
        geyao.show.GeyaoCall(test,fangfang)

运行结果