首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深入理解:为什么在与新的Promise一起使用时,.bind(这)似乎不遵循正常规则

在与新的Promise一起使用时,.bind(这)似乎不遵循正常规则的原因是,Promise对象是一种用于处理异步操作的特殊对象,它代表了一个尚未完成但最终会完成的操作。在使用Promise时,我们可以通过调用.then()方法来注册回调函数,以处理Promise对象的状态变化。

然而,当我们使用.bind()方法来绑定回调函数中的this值时,可能会遇到一些问题。正常情况下,.bind()方法会创建一个新的函数,并将其内部的this值绑定到指定的对象上。但是,在与Promise一起使用时,.bind(这)似乎不起作用的原因是,Promise对象的回调函数是在未来某个时间点执行的,而不是在绑定时立即执行的。

由于Promise的回调函数是在未来执行的,此时使用.bind()方法来绑定this值已经没有意义,因为在回调函数执行时,this值已经发生了变化。实际上,Promise对象会在回调函数执行时将this值设置为undefined,而不是绑定时的对象。

因此,在与新的Promise一起使用时,不建议使用.bind(这)来绑定回调函数中的this值。相反,可以使用箭头函数来确保回调函数中的this值与绑定时的对象保持一致。箭头函数会继承外部函数的this值,因此可以避免this值的变化。

以下是一个示例代码,展示了在与Promise一起使用时,使用箭头函数来绑定回调函数中的this值:

代码语言:txt
复制
const obj = {
  value: 42,
  getValue() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.value);
      }, 1000);
    });
  }
};

obj.getValue().then((value) => {
  console.log(value); // 输出: 42
});

在上述示例中,箭头函数被用于回调函数中,确保了回调函数中的this值与绑定时的obj对象保持一致。

总结起来,当与新的Promise一起使用时,.bind(这)似乎不遵循正常规则的原因是,Promise对象的回调函数是在未来执行的,此时使用.bind()方法来绑定this值已经没有意义。因此,建议使用箭头函数来确保回调函数中的this值与绑定时的对象保持一致。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

美团前端一面高频面试题

根据上面的数据,可以知道,get方法中的URL长度最长不超过2083个字符,这样所有的浏览器和服务器都可能正常工作。...对象(包括数组)会首先被转换为相应的基本类型值,如果返回的是非数字的基本类型值,则再遵循以上规则将其强制转换为数字。...可以借助这个特性 自己包装一个 空的 Promise 与要发起的 Promise 来实现function wrap(pro) { let obj = {}; // 构造一个新的promise用来竞争..., 不能修改对象 return res;}bind描述:bind 方法会创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数...核心思想:调用bind的可能不是函数bind() 除了 this 外,还可传入多个参数bind() 创建的新函数可能传入多个参数新函数可能被当做构造函数调用函数可能有返回值实现:Function.prototype.bind1

64530

学习函数式编程 Monad

在函数式编程中,Monad 是一种结构化程序的抽象,我们通过三个部分来理解一下。...Monad 中的 unit,在 Promise 中可以看为:x => Promise.resolve(x) Monad 中的 bind,在 Promise 中可以看为:Promise.prototype.then...看到这里,相信大家对 Promise 也有了一层新的了解,正是借助了 Monad 一样的链式操作,才使 Promise 广泛应用在了前端异步代码中,你是否也和我一样,对 Monad 充满了好感?...那么 1 就是单位元(乘法单位元) Ok,我们已经了解了所有应该掌握的专业术语,那就简单串解一下这段解释吧: 一个 自函子 范畴 上的 幺半群 ,可以理解为,在一个满足结合律和单位元规则的集合中,存在一个映射关系...相信掌握了这些理论知识,肯定会对 Monad 有一个更加深入的理解。

75820
  • javascript基础修炼(3)—Whats this(下)

    引用转换 引用转换实际上并不会影响this的指向,因为它是词法性质的,发生在定义时,而this的指向是运行时确定的。只要遵循this指向的基本原则就不难理解。...所以在函数内部操作一个值为引用类型的形参时,会影响到函数外部作用域,因为它们均指向内存中的同一个函数。详细可参考[深入理解javascript函数系列第二篇——函数参数]这篇博文。...五. this指针丢失 在第三节和第四节中,通过原理分析就能够明白为何在一些特定的场合下this会指向全局对象,但是从语言的角度来看,却很难理解this为什么指向了全局对象,因为这个规则和语法的字面意思是有冲突的...Nodejs中的this Nodejs是一种脱离浏览器环境的javascript运行环境,this的指向规则上与浏览器环境在全局对象的指向上存在一定差异。 1....函数级this指向 this的基本规则中有一条—当作为函数调用时,函数中的this指向全局对象,这一条在nodejs中也是成立的,这里的this指向了全局对象(此处的全局对象Global对象是有别于模块级全局对象的

    88620

    死磕 36 个 JS 手写题(搞懂后,提升真的大)

    bind 方法会创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...return value } return new Promise(resolve => resolve(value)) } 参考:深入理解 Promise[10] Promise.reject...但与 Promise.resolve() 不同的是,如果给 Promise.reject() 传递一个 Promise 对象,则这个对象会成为新 Promise 的值。...Promise.all 的规则是这样的: 传入的所有 Promsie 都是 fulfilled,则返回由他们的值组成的,状态为 fulfilled 的新 Promise; 只要有一个 Promise...的规则是这样: 所有 Promise 的状态都变化了,那么新返回一个状态是 fulfilled 的 Promise,且它的值是一个数组,数组的每项由所有 Promise 的值和状态组成的对象; 如果有一个是

    97160

    【React】1260- 聊聊我眼中的 React Hooks

    但相应地,这也破坏了函数命名的语义。固定的use前缀使 Hooks 很难命名,你既为useGetState这样的命名感到困惑,也无法理解useTitle到底是怎么个use法儿。...好比封装一个纯函数add(),不论开发者是在什么环境调用、在多么深的层级调用、用什么样的调用时序,只要传入的参数符合要求,它就可以正常运作,简单而纯粹。...这意味着一次完整的生命周期中,useRef保留的引用始终不会改变。 而这一特点却让它成为了 Hooks 闭包救星。 「遇事不决,useRef !」...即便我们的封装中不包含任何 Hooks,在调用时也仅仅是包一层useEffect而已,不算费事,而且让这段逻辑也可以在 Hooks 以外的地方使用。...小结 本文没有鼓吹 Class Component 拒绝使用 React Hooks 的意思,反而是希望通过细致地比对二者,从而更深入理解 Hooks。

    1.1K20

    Promise 原理探究

    因此有必要深入了解一下Promise的原理。 看看下面这几道题,能不能轻松答出来?...完整版(v4) 在完整版中,将加入以下的特性 支持then链式调用,每次调用then均返回一个新的promise 决议值为promise(非简单数值)以及 then返回promise时,需要反解出结果...每个then都会返回新的promise,错误是发生在p2里面的,而onRejected捕获的是p1的错误。...·这三点 每次调用then均返回一个新的Promise 反解内部的promise then未传入任何回调,透传上一promise决议值 第一题 为什么finalHandler的执行顺序在doSomethingElse...第四题 这是正常的用法,doSomethingElse作为then1的onResolve回调,接收doSomething()的决议值,执行后返回另一个promise,then1会将这个promise解开并将其决议值作为他的

    2.3K70

    一劳永逸地搞懂 JavaScript中‘this’

    免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验 引言:this 在 JS 中 —— 为什么它如此重要 你是否曾觉得 JavaScript 似乎在戏弄你,尤其是当它在你面前挥舞...那么,为什么这很重要? 掌握全局上下文中的 this 为理解其在更复杂场景中的行为提供了基础。...当你深入JavaScript时,你会发现有些情况下,函数或方法是从全局上下文中调用的,理解这种行为变得至关重要。 通过掌握基础知识,当我们深入探讨 this 的后续部分时,你为自己奠定了成功的基础。...理解常规函数内部this的行为都是关于上下文的。它是关于知道在调用时哪个对象“拥有”函数。这种洞察可以防止无数的错误和挫败感,尤其是当你的JavaScript项目在复杂性上增长时。...这都是关于你来自哪里的 你知道在生活中,我们中的一些人根据我们所在的地方和我们与谁在一起会戴不同的帽子吗?常规函数也做类似的事情与 this。

    14310

    36个助你成为专家需要掌握的JavaScript概念

    状态变化对于使用React的开发人员尤其重要。 纯函数总是返回与提供的输入一致的值,而不访问或者改变其作用域以外的任何变量。这种类型的函数更容易阅读、调试和测试。...老实说,我是在做演示项目时学到Promise的概念的。 这让我很难理解发生了什么,因为我不知道Promise是什么。快进到现在。由于网络上丰富的资源,我对Promise有了更好的理解。...没有固定的规则规定你应该使用这些算法之一,但是这些算法在性能方面是众所周知的,并且有很好的文档证明。 你甚至可以创建自己的算法,并将其介绍给世界。...如果它比目前已知的算法更好,你可能会成为下一个编程明星! 31、 继承、多态和代码重用 JavaScript中的继承与原型一起工作。这是因为JavaScript是非面向对象的语言。...你可以在我的文章中阅读更多关于解构的内容。 36、ES2020新特性 编程的美妙之处在于,如果不不断学习,就永远不可能成为编程语言的专家。

    71220

    NioServerSocketChannel的绑定源码解析

    promise) { //this.bind head return pipeline.bind(localAddress, promise); } 我们到这里看到了一行奇怪的代码,...似乎调用了一个通道的传播,我们继续跟下去: @Override public final ChannelFuture bind(SocketAddress localAddress, ChannelPromise...是从后向前传播的,即从tail节点向前传播,最终到Head节点结束的,但是TailContext与ServerBootstrapAcceptor都未实现bind方法,那么我们最终把位置定位到HeadContext...的代码上:(注意,这里不必知道,哎pipeline中是如何传播的,下面有一章节是对pipeline的添加、寻找、注册有一个完整的源码分析,这里为了同学们更好的理解,就先不涉及这么多了!)...才疏学浅,如果文章中理解有误,欢迎大佬们私聊指正!欢迎关注作者的公众号,一起进步,一起学习!

    47930

    那些高级前端是如何回答面试题的_2023-02-24

    ,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...实现要点:bind() 除了 this 外,还可传入多个参数;bing 创建的新函数可能传入多个参数;新函数可能被当做构造函数调用;函数可能有返回值;Function.prototype.bind2 =...但与 Promise.resolve() 不同的是,如果给 Promise.reject() 传递一个 Promise 对象,则这个对象会成为新 Promise 的值。...的规则是这样的:传入的所有 Promsie 都是 fulfilled,则返回由他们的值组成的,状态为 fulfilled 的新 Promise;只要有一个 Promise 是 rejected,则返回...的规则是这样:空数组或者所有 Promise 都是 rejected,则返回状态是 rejected 的新 Promsie,且值为 AggregateError 的错误;只要有一个是 fulfilled

    52630

    任务,微任务,队列和时间表

    Microsoft Edge,Firefox 40,iOS Safari和桌面Safari 8.0.8 setTimeout之前promise1和之后都进行了日志记录promise2-尽管这似乎是一种竞争状况...这真的很奇怪,因为Firefox 39和Safari 8.0.7始终如一地正确。 为什么会这样 要了解这一点,您需要了解事件循环如何处理任务和微任务。第一次遇到这个问题可能会让您大吃一惊。...是的,我们几乎已经完成了这一步,但我需要您在接下来的这段时间内保持坚强…… Microtasks通常安排事情,应该当前执行脚本后直发生,如反应批量的行动,或使一些异步而不采取一个全新的任务的处罚。...这就是为什么promise1并promise2在之后记录日志的原因script end,因为当前正在运行的脚本必须在处理微任务之前完成。...上面的规则确保微任务不会中断执行中的JavaScript。这意味着我们不处理侦听器回调之间的微任务队列,而是在两个侦听器之后进行处理。 有什么关系吗? 是的,它会在不起眼的地方(哎呀)咬你。

    2.2K20

    前端老手 10 年心得,JavaScriptTypeScript 项目保养实用指南

    当我们的用户遵循“快乐路径(happy path)”时,这些错误似乎无关紧要,因为软件似乎能够按照预期运行。所以,我们可能会使用@ts-ignore、any或类型断言来暂时忽略它们。...你不希望看到的是期望值降低到一个最低的平均水准。这样的话,你可以把代码划分为不同的范围,并为每个范围设置不同的期望水平。 例如,考虑一个即将为电子商务网站实现新特性的团队。...举例来说: 如果开发人员失去了长期保持高设计标准和 / 或代码质量的动力。 如果部分开发人员不遵循团队的质量准则,造成系统性返工、挫折和延误。...下面是一些关于如何避免上述陷阱的建议: 在详细阐述业务问题的解决方案时,至少让一名开发人员参与设计过程。这将提高开发人员的责任心,使他们能够为一个充分理解的问题实现一个好的解决方案。...在管理方面,确保开发人员不会得到这样的激励,即“每周尽可能多地发布特性”。找到使每个开发人员的职业目标与团队的短期和长期期望相匹配的发展轨道。

    17410

    【JS 口袋书】第 8 章:以更细的角度来看 JS 中的 this

    当一个函数在全局环境中被调用时,该函数会将它的this指向全局对象,在咱们的例子中是window。 这是JS的第一条规则,叫作默认绑定。默认绑定就像一个回退,大多数情况下它是不受欢迎的。...用于的显式绑定(规则3):显式绑定指显示地将this绑定到一个上下文。但为什么要显式绑定或重新绑定函数呢?...bind 是绑定函数最强大的方法。bind仍然为给定的函数接受一个新的上下文对象,但它不只是用新的上下文对象调用函数,而是返回一个永久绑定到该对象的新函数。...现在应该清楚为什么要在 React 使用 bind来重新绑定类方法了吧。...大多数情况下,不希望与全局作用域交互,JS 为此就提供了一种用严格模式来中和默认绑定的方法。在严格模式下,对全局对象的任何引用都是 undefined,这有效地保护了我们避免愚蠢的错误。

    2.7K20

    为何面向手写代码常被吐槽,但其仍未动摇?

    又一年金三银四到来,似乎 “面向手写/机写代码面试” 已经成为一些公司的必备面试之一了,在互联网面试中也占据着重要地位,当被面试手写代码时,刚开始自信心爆棚,有种提笔就来的感觉,上来就是一顿写、一顿画,...社区已经有一些现成的库了,为什么还要手写?当然这并不是必须的,谈一点自己的思考,在实际的开发过程中,也会去优先选择一些优秀的库,并不会到处造轮子,否则也会增加维护的成本。...如果只会 API 调用,哪怕它的实现很简单,也是不知道的,如果能在工作中多一些思考,对一些自己经常使用的东西多一些学习和思考,一方面能加深自己的理解、例如 Promise 的 resolve 函数不执行会发生什么...自定义 mayJunBind 函数 bind 的实现与 call、apply 不同,但也没那么复杂,首先 bind 绑定之后并不会立即执行,而是会返回一个新的匿名函数,只有我们手动调用它才会执行。...Promise 解决过程 声明函数 resolveMayJunPromise(),Promise 解决过程是一个抽象的操作,在这里可以做到与系统的 Promise 或一些遵循 Promise/A+ 规范的

    82340

    【单子】说白了不过就是【自函子范畴】上的一个【幺半群】而已?请说人话!!

    bind(约束变量的那个bind),并表示为中缀算子>>=,去包装一个单体变量,接着把它插入到一个单体函数/表达式之中,结果为一个新的单体值: (mx >>= f) :: (M T, T -> M U...) -> M U 同时,这 3 个组成部分还需遵循 3 个定律: unit是bind的左单比特: unit(a) >>= λx -> f(x) ↔ f(a) unit也是bind的右单比特:...可以直接这样理解:Monad 是一种特殊的数据结构,它能把值进行包装,然后链接执行;王垠在《对函数式语言的误解》中准确了描述了 Monad 本质: Monad 本质是使用类型系统的“重载”(overloading...bind,用于链接执行; Promise 等效于把函数进行包装,Promise.resolve 等效于把这个包装进行拆开,将为一个普通的值; 不过,Promise 不都是 Monad,示例 Promise.resolve...如果不是,那就放到后面需要去理解的时候再去理解吧~~ 不过至少,也要勾勒一下 Monad 和 Promise 关系的大致轮廓;Promise 是 JS 人的浪漫!Monad 是函数式编程的浪漫!

    1.1K20

    腾讯前端二面面试题(附答案)

    相比,不返回报文主体部分;OPTIONS:询问支持的请求方法,用来跨域请求;CONNECT:要求在与代理服务器通信时建立隧道,使用隧道进行TCP通信;TRACE: 回显服务器收到的请求,主要⽤于测试或诊断...,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...但与 Promise.resolve() 不同的是,如果给 Promise.reject() 传递一个 Promise 对象,则这个对象会成为新 Promise 的值。...11.Proxy Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问 都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。...WebSocket 是 HTML5 定义的一个新协议议,与传统的 http 协议不同,该协议允许由服务器主动的向客户端推送信息。使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。

    1.1K30

    JS箭头函数三连问:为何用、怎么用、何时用

    在这篇文章中我们将回顾箭头函数是怎样工作的,然后深入探讨,实际代码中箭头函数是如何改进我们代码的,以及一些箭头函数不推荐的情况。...这跟传统的函数很相像,只是我们省略了function关键字,并且添加了一个=>在参数后面。 并且,这里也有很多种情况,让箭头函数结构变得更加的简洁。...Promise可以更简单的编写异步程序。虽然你乐意去使用async/await,你也需要好好理解promise,因为这是他们的基础。 使用promise,仍然需要定义你的代码执行完成之后的回调函数。...如果你在以下情形使用箭头函数,那么this的动态绑定不会如期工作,并且你也会困惑这些代码为什么不像预期那样工作,也会给你之后工作的人造成麻烦。...当然你也可以在上面的情形之下谨慎的使用箭头函数。但特别是在jquery和vue的情况下, 这通常会干扰正常功能, 并使您感到困惑:为什么看起来跟别人代码一样的代码就是不工作。

    2.6K20

    前端二面必会面试题(附答案)

    网络层与数据链路层的对比,通过上面的描述,我们或许可以这样理解,网络层是规划了数据包的传输路线,而数据链路层就是传输路线。不过,在数据链路层上还增加了差错控制的功能。...,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...实现要点:bind() 除了 this 外,还可传入多个参数;bing 创建的新函数可能传入多个参数;新函数可能被当做构造函数调用;函数可能有返回值;Function.prototype.bind2 =...但与 Promise.resolve() 不同的是,如果给 Promise.reject() 传递一个 Promise 对象,则这个对象会成为新 Promise 的值。...的规则是这样的:传入的所有 Promsie 都是 fulfilled,则返回由他们的值组成的,状态为 fulfilled 的新 Promise;只要有一个 Promise 是 rejected,则返回

    1.1K40

    在现代 JavaScript 中编写异步任务

    作为编程语言, JavaScript 有两个主要特征,这两个特征对于理解我们的代码如何工作非常重要。首先是它的同步特性,这意味着代码将逐行运行,其次是单线程,任何时候都仅执行一个命令。...注意:如果你需要更深入地了解 Promise 的工作原理,建议你看 Jake Archibald 在 Google 的 web 开发博客上写的文章“ JavaScript Promises:简介”。...基于 Promise 的代码似乎可以解决可读性差且容易出错的代码。...,尤其是在错误处理方面,因为我们现在依赖于 catch,但是 Promise 在某种程度上没能提供直接与动作串联相关的清晰代码缩进。...结论 将 Promise 引入 Web 开发的目的是改变我们在代码中顺序操作的方式,并改变了我们理解代码的方式以及编写库和包的方式。

    2.4K30

    如果才能做好准备好前端面试

    对this对象的理解this 是执行上下文中的一个属性,它指向最后一次调用这个方法的对象。在实际开发中,this 的指向可以通过四种调用模式来判断。...这四种方式,使用构造器调用模式的优先级最高,然后是 apply、call 和 bind 调用模式,然后是方法调用模式,然后是函数调用模式。为什么需要浏览器缓存?..., 不能修改对象 return res;}bind描述:bind 方法会创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数...核心思想:调用bind的可能不是函数bind() 除了 this 外,还可传入多个参数bind() 创建的新函数可能传入多个参数新函数可能被当做构造函数调用函数可能有返回值实现:Function.prototype.bind1...res : obj;}对事件循环的理解因为 js 是单线程运行的,在代码执行时,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。

    46820
    领券