前端扫盲202307手写call

前言

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

call用法

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

代码语言：javascript复制

 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函数

代码语言：javascript复制

   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个参数 加入属性会增加他的属性 这些都是我们需要解决的 于是乎 我们将传递的参数变为两个参数

继续优化

代码语言：javascript复制

 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)

运行结果

测试没有参数

代码语言：javascript复制

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()

运行结果

测试多个参数

代码语言：javascript复制

 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)

运行结果

总结

var 测试 函数 前端 优化

0 人点赞