当前位置:首页 > 科技  > 软件

Bind、Call、Apply的区别?如何实现bind

来源: 责编: 时间:2024-03-18 09:41:33 259观看
导读bind、call、apply的作用?bind, call, 和 apply 是 JavaScript 中非常有用的方法,它们主要用于改变函数的执行上下文以及传递参数。bind:bind()方法创建一个新的函数,该函数的this关键字被绑定到指定的对象,同时还可以提

bind、call、apply的作用?

bind, call, 和 apply 是 JavaScript 中非常有用的方法,它们主要用于改变函数的执行上下文以及传递参数。mMB28资讯网——每日最新资讯28at.com

  • bind:bind()方法创建一个新的函数,该函数的this关键字被绑定到指定的对象,同时还可以提供一系列参数。这对于在事件处理函数、定时器或回调函数中绑定上下文非常有用。
const obj = {  x: 42};function getX(y) {  return this.x + y;}const boundGetX = getX.bind(obj);console.log(boundGetX(2)); // 输出 44
  • call:call()方法调用一个函数,允许你指定函数执行时的上下文(this),并传递一系列参数作为函数的参数。这在需要立即调用函数并指定上下文的情况下非常有用。
const obj = {  x: 42};function getX(y) {  return this.x + y;}console.log(getX.call(obj, 2)); // 输出 44
  • apply:apply()方法调用一个函数,允许你指定函数执行时的上下文(this),同时传递一个数组或类数组对象作为函数的参数。这在需要传递参数数组的情况下非常有用。
const obj = {  x: 42};function getX(y) {  return this.x + y;}console.log(getX.apply(obj, [2])); // 输出 44

bind、call、apply的区别?

bind, call, 和 apply 是 JavaScript 中用于处理函数执行上下文和参数传递的方法,它们有着不同的特点和用途。mMB28资讯网——每日最新资讯28at.com

  • bind()

bind() 方法创建一个新的函数,该函数的 this 关键字被绑定到指定的对象,并且提供了一系列参数。不会立即执行函数,而是返回一个新的函数,可以稍后调用。mMB28资讯网——每日最新资讯28at.com

const obj = {  x: 42};function getX(y) {  return this.x + y;}const boundGetX = getX.bind(obj);console.log(boundGetX(2)); // 输出 44
  • call()

call() 方法调用一个函数,允许你显式指定函数执行时的上下文(this),并且可以传递一系列参数作为函数的参数。立即执行函数。mMB28资讯网——每日最新资讯28at.com

const obj = {  x: 42};function getX(y) {  return this.x + y;}console.log(getX.call(obj, 2)); // 输出 44
  • apply()

apply() 方法调用一个函数,允许你显式指定函数执行时的上下文(this),同时传递一个数组或类数组对象作为函数的参数。立即执行函数。mMB28资讯网——每日最新资讯28at.com

const obj = {  x: 42};function getX(y) {  return this.x + y;}console.log(getX.apply(obj, [2])); // 输出 44

区别总结:mMB28资讯网——每日最新资讯28at.com

  • 参数传递方式:

bind() 接受一系列参数,返回一个新函数。mMB28资讯网——每日最新资讯28at.com

call() 和 apply() 接受一个参数列表或数组作为参数。mMB28资讯网——每日最新资讯28at.com

  • 执行时机:
  • bind() 不会立即执行函数,而是返回一个新的绑定函数。
  • call() 和 apply() 立即执行函数。
  • 返回值:
  • bind() 返回一个新的函数。
  • call() 和 apply() 直接执行函数,并返回执行结果。

实现

下面是一个简单的 bind 函数的实现,该实现基于了对 JavaScript 的原型链和闭包的理解:mMB28资讯网——每日最新资讯28at.com

Function.prototype.myBind = function (context) {  const fn = this; // 保存原函数  const args = Array.prototype.slice.call(arguments, 1); // 获取除第一个参数(context)以外的所有参数  return function () { // 返回一个函数,这个函数会被当做绑定后的函数调用    const bindArgs = Array.prototype.slice.call(arguments); // 获取 bind 方法的参数    return fn.apply(context, args.concat(bindArgs)); // 在 context 上执行原函数,并传入所有参数  };};// 示例const obj = {  x: 42};function getX(y) {  return this.x + y;}const boundGetX = getX.myBind(obj);console.log(boundGetX(2)); // 输出 44

在这个实现中,通过 Function.prototype 对象扩展了一个 myBind 方法。在 myBind 方法内部,首先保存了原函数 fn,然后提取除第一个参数(要绑定的上下文)之外的所有参数到 args 数组中。然后,我们返回了一个新的函数,这个函数会在指定的上下文 context 上执行原函数,并将原始的参数与绑定的参数合并起来传递给原函数。mMB28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-76520-0.htmlBind、Call、Apply的区别?如何实现bind

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 彻底理解异步编程!你理解了吗?

下一篇: 一个熟悉又陌生的关键字:volatile

标签:
  • 热门焦点
  • 容量越大越不坏?24万块硬盘故障率报告公布 这些产品零故障

    8月5日消息,云存储服务商Backblaze发布了最新的硬盘故障率报告,年故障率有所上升。Backblaze发布的硬盘季度统计数据,其中包括故障率等重要方面。这些结
  • 一篇聊聊Go错误封装机制

    %w 是用于错误包装(Error Wrapping)的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词,用于将一个错误(或其他可打印的值)包装在一个新的错误中。使
  • 为什么你不应该使用Div作为可点击元素

    按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素,如 div span 等作为 clickable 元素。但通过这样做,我们错过了许多内置浏览器的功能。
  • 每天一道面试题-CPU伪共享

    前言:了不起:又到了每天一到面试题的时候了!学弟,最近学习的怎么样啊 了不起学弟:最近学习的还不错,每天都在学习,每天都在进步! 了不起:那你最近学习的什么呢? 了不起学弟:最近在学习C
  • 本地生活这块肥肉,拼多多也想吃一口

    出品/壹览商业 作者/李彦编辑/木鱼拼多多也看上本地生活这块蛋糕了。近期,拼多多在App首页“充值中心”入口上线了本机生活界面。壹览商业发现,该界面目前主要
  • 新电商三兄弟,“抖快红”成团!

    来源:价值研究所作 者:Hernanderz 随着内容电商的概念兴起,抖音、快手、小红书组成的“新电商三兄弟”成为业内一股不可忽视的势力,给阿里、京东、拼多多带去了巨大压
  • 华为HarmonyOS 4升级计划公布:首批34款机型今日开启公测

    8月4日消息,今天下午华为正式发布了HarmonyOS 4系统,在更流畅的前提下,还带来了不少新功能,UI设计也有变化,会让手机焕然一新。华为宣布,首批机型将会在
  • 联想小新Pad Pro 12.6将要推出,搭载高通骁龙 870 处理器

    联想小新Pad Pro 12.6将于秋季新品会上推出,官方按照惯例直接在发布会前给出了机型的所有参数。联想小新 Pad Pro 12.6 将搭载高通骁龙 870 处理器,重量为 5
  • 苹果MacBook Pro 2021测试:仍不支持平滑滚动

    据10月30日9to5 Mac 消息报道,苹果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后获得了不错的评价,亮点包括行业领先的性能,令人印象深刻的电池续航,精美丰
Top