前端小技巧: TS实现bind函数,call函数,以及apply函数

这篇具有很好参考价值的文章主要介绍了前端小技巧: TS实现bind函数,call函数,以及apply函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

bind 函数实现

  • 返回一个新函数,但是不执行

    Function.prototype.customBind = function (context:any, ...bindArgs: any[]) {
      // context 是bind传入的this
      // bindArgs 是bind传入的各个参数
      const self = this // 当前函数本身
      return function(...args:any[]) {
        const newArgs = bindArgs.concat(args)
        return self.apply(context, newArgs)
      }
    }
    
    function fn(this:any, a:any, b:any, c:any) {
      console.info(this, a, b, c)
    }
    
    const fn1 = fn.customBind({x: 100}, 10)
    fn1(20, 30)
    
  • 实际上,原生js中,bind 底层用的就是 apply

  • bind是返回一个新函数,不执行

  • call和apply是会立刻执行的文章来源地址https://www.toymoban.com/news/detail-717800.html

call 函数实现

Function.prototype.customCall = function (context: any, ...args: any[]) {
  if (!context) context = globalThis
  if (typeof context !== 'object') context = new Object(context) // 值类型转化为对象
  const fnKey = Symbol()
  context[fnKey] = this // this 就是当前的函数
  const res = context[fnKey](...args) // 绑定了this 这是立即执行
  delete context[fnKey]
  return res
}

function fn(this:any, a:any, b:any, c:any) {
  console.log(this, a, b, c)
}

fn.customCall({x:100}, 1, 2, 3) // 这里会立即执行

apply 函数实现

Function.prototype.customApply = function (context: any, args: any[] = []) {
  if (!context) context = globalThis
  if (typeof context !== 'object') context = new Object(context) // 值类型转化为对象
  const fnKey = Symbol()
  context[fnKey] = this // this 就是当前的函数
  const res = context[fnKey](...args) // 绑定了this 这是立即执行
  delete context[fnKey]
  return res
}

function fn(this:any, a:any, b:any, c:any) {
  console.log(this, a, b, c)
}

fn.customApply({x:100}, 1, 2, 3) // 这里会立即执行

总结

  • 绑定 this
  • 传入执行参数
  • 分析:
    • 如何在函数执行时,绑定this
    • 如:const obj = {x: 100, fn() {this.x}}
    • 执行obj.fn(), 此时fn内部的this就指向obj
    • 可以借次来实现函数绑定 this
  • 用 call 实现 apply, 用 apply 实现 call 不可取
  • 原生 call apply 的 this
    • 如果this是值类型,会被 new Object(…)
    • 如果this是null的话,会变成 globalThis
  • Symbol 的作用,是防止属性之间的冲突

到了这里,关于前端小技巧: TS实现bind函数,call函数,以及apply函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 54-函数的3种定义,函数的4种调用:函数模式调用,方法模式调用,构造函数模式调用,apply call bind调用

    一.函数的3种定义  1.函数的声明定义:具有声明提升 2.函数的表达式定义 3.构造函数定义 var 变量 = new F unction(\\\"形参1\\\",\\\"形参2\\\",\\\"形参3\\\",\\\"方法体\\\"); 二.函数的4种调用 1普通模式调用 2. 内联模型 函数模式调用, this 指向 window  

    2024年01月25日
    浏览(48)
  • 手写apply、call、bind

    作用:改变this执行,函数立即执行,参数以数组传递 思路:         1、在this新指向的对象上,增加一个函数等于待执行函数         2、去参数         3、执行函数         4、删除增加的函数,返回结果 作用:改变this执行,函数立即执行,参数依次传递 思路:      

    2024年02月06日
    浏览(41)
  • 【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

    🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 👉

    2024年02月21日
    浏览(78)
  • Js:apply/call/bind、作用域/闭包、this指向(普通,箭头,JS/Vue的this)

    共同点: apply()、call() 和 bind() 方法 三者作用都是 改变this指向。 接收的第一个参数都是this要指向的对象 区别: apply只有两个参数,第二个参数为数组; call和bind传参相同,多个参数依次传入的; call和apply都是对函数进行直接调用(立即执行),而bind方法不会立即调用函数

    2023年04月08日
    浏览(94)
  • 【延伸学习】TS(JS)类的继承(prototype、call、apply,extends)

    PS:文末附上完整的代码(是在CocosCreator下运行的) 一. 基(父)类   基类包含三个成员变量(名字、年龄)还有一个后面用于测试的数组,两个原型方法(输出名字,输出年龄),还有一个类似静态函数的方法。 基类唯一测试的,就是用类名可以直接调用eat这个静态方法。

    2024年01月25日
    浏览(41)
  • 17 JavaScript 中的call和apply

    17 JavaScript 中的call和apply 对于咱们逆向工程师而言. 并不需要深入的理解call和apply的本质作用. 只需要知道这玩意执行起来的逻辑顺序是什么即可 在运行时. 正常的js调用: 接下来, 我们可以使用call和apply也完成同样的函数调用 apply和他几乎一模一样. 区别是: apply传递参数要求是

    2024年02月11日
    浏览(36)
  • 【JavaScript】Function的祖传方法call与apply

    看了本文您能了解到的知识! 在本篇文章中,将带你了解 什么是call和apply , call和apply的用途 、如何手写 call 和 apply 以及 call 和 apply 的使用场景。 call() 和 apply() 是 JavaScript 中的两个内置方法,用于调用函数并指定函数中的 this 值。 两者的区别是: call() 方法的语法和作用

    2024年02月17日
    浏览(54)
  • JavaScript中apply函数方法多种使用方法!

    在JavaScript中, apply 是函数对象的一个方法,用于调用一个函数,并指定函数内部的 this 上下文以及函数的参数列表。它与另一个方法 call 功能类似,但是参数传递的方式略有不同。 apply 方法的语法如下: thisArg : 在调用函数时指定的 this 上下文,即函数内部的 this 指向的对

    2024年03月10日
    浏览(61)
  • 【Socket】Linux下UDP Socket的基本流程以及connect、bind函数的使用(C语言实现)

    Socket的原意是“插座”,在计算机通信领域,socket 被翻译为“套接字”。 Socket通信主要有两个类型:TCP、UDP。 TCP通信,是一个有序的、可靠的、面向连接的通信方式。用数据流的方式传递信息。 UDP通信,是无连接的、不保证有序到达的、但具有较好的实时性、能够高速传输

    2024年02月13日
    浏览(33)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包