前端扫盲202307手写call(1)

简介: 前端扫盲202307手写call

前言


大家好 我是歌谣 最近开始进行前端的知识扫盲的讲解 今天要给大家带来的是手写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)

控制台输出

image.png



简单小结


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

相关文章
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
37 0
|
6月前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
6月前
|
前端开发 JavaScript
前端 JS 经典:apply、call、bind
前端 JS 经典:apply、call、bind
93 0
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写call得实现1
前端学习笔记202306学习笔记第三十八天-手写call得实现1
39 0
|
存储 移动开发 前端开发
【React工作记录九十四】前端小知识点扫盲笔记记录3
【React工作记录九十四】前端小知识点扫盲笔记记录3
81 0
|
前端开发
前端扫盲之手写apply
前端扫盲之手写apply
75 0
前端扫盲之手写apply
|
前端开发
前端扫盲202307手写apply
前端扫盲202307手写apply
59 0
|
前端开发
前端扫盲202307手写call(2)
前端扫盲202307手写call
60 0
|
前端开发
前端小知识点扫盲笔记记录8
前端小知识点扫盲笔记记录8
40 0
|
前端开发
前端学习笔记202306学习笔记第三十八天-手写call得实现2
前端学习笔记202306学习笔记第三十八天-手写call得实现2
44 0
下一篇
无影云桌面