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

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

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

bind、call、apply的作用?

bind, call, 和 apply 是 JavaScript 中非常有用的方法,它们主要用于改变函数的执行上下文以及传递参数。rnz28资讯网——每日最新资讯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 中用于处理函数执行上下文和参数传递的方法,它们有着不同的特点和用途。rnz28资讯网——每日最新资讯28at.com

  • bind()

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

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

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

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

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

  • 参数传递方式:

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

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

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

实现

下面是一个简单的 bind 函数的实现,该实现基于了对 JavaScript 的原型链和闭包的理解:rnz28资讯网——每日最新资讯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 上执行原函数,并将原始的参数与绑定的参数合并起来传递给原函数。rnz28资讯网——每日最新资讯28at.com

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

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

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

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

标签:
  • 热门焦点
  • 俄罗斯:将审查iPhone等外国公司设备 保数据安全

    iPhone和特斯拉都属于在各自领域领头羊的品牌,推出的产品也也都是数一数二的,但对于一些国家而言,它们的产品可靠性和安全性还是在限制范围内。近日,俄罗斯联邦通信、信息技术
  • 女孩租房开2小时空调用完100元电费引热议:5级能耗惹不起 月薪过万电费也交不起

    近日,江苏苏州一女孩租房当天充值了100元电费,开着空调不到2小时发现电费已用完。对于为什么这个快,房东表示,电表坏了这种情况很多,之前也遇到过,给租客换
  • K6:面向开发人员的现代负载测试工具

    K6 是一个开源负载测试工具,可以轻松编写、运行和分析性能测试。它建立在 Go 和 JavaScript 之上,它被设计为功能强大、可扩展且易于使用。k6 可用于测试各种应用程序,包括 Web
  • 线程通讯的三种方法!通俗易懂

    线程通信是指多个线程之间通过某种机制进行协调和交互,例如,线程等待和通知机制就是线程通讯的主要手段之一。 在 Java 中,线程等待和通知的实现手段有以下几种方式:Object 类下
  • 一年经验在二线城市面试后端的经验分享

    忠告这篇文章只适合2年内工作经验、甚至没有工作经验的朋友阅读。如果你是2年以上工作经验,请果断划走,对你没啥帮助~主人公这篇文章内容来自 「升职加薪」星球星友 的投稿,坐
  • 使用LLM插件从命令行访问Llama 2

    最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展:Llama 2可免费用于研究和商业用途。(几小时前,swyy发现它已从LLaMA 2更名为Lla
  • WebRTC.Net库开发进阶,教你实现屏幕共享和多路复用!

    WebRTC.Net库:让你的应用更亲民友好,实现视频通话无痛接入! 除了基本用法外,还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
  • 梁柱接棒两年,腾讯音乐闯出新路子

    文丨田静 出品丨牛刀财经(niudaocaijing)7月5日,企鹅FM发布官方公告称由于业务调整,将于9月6日正式停止运营,这意味着腾讯音乐长音频业务走向消亡。腾讯在长音频领域还在摸索。为
  • 认真聊聊东方甄选:如何告别低垂的果实

    来源:山核桃作者:财经无忌爆火一年后,俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日,为期5天的东方甄选“甘肃行”首次在自有App内直播,
Top