JavaScript / React中的bind () - 腾讯云开发者社区

文章/答案/技术大牛

发布

Javascript中的bind详解

前言用过React的同学都知道，经常会使用bind来绑定this。...先看一下bind是什么。从上面的React代码中，可以看出bind执行后是函数，并且每个函数都可以执行调用它。眼见为实，耳听为虚。...' console.log((function(){}).bind().length); // 0 由此可以得出结论2： 1、调用bind的函数中的this指向bind()函数的第一个参数。...另外觉得写得不错，可以点个赞，也是对笔者的一种支持。文章中的例子和测试代码放在github中bind模拟实现 github。...深入理解ES6 简体中文版 - 第三章函数（虽然笔者是看的纸质书籍，但推荐下这本在线的书） MDN Function.prototype.bind 冴羽: JavaScript深入之bind的模拟实现

1.9K3 2

JavaScript 中至关重要的 Bind

面试官：请你讲讲 js 中 Bind 本文翻译自： http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals...JavaScript 中至关重要的 Bind 我们用 Bind() 来实现在指明函数内部 this 指向的情况下去调用该函数, 换句话说, bind() 允许我们非常简单的在函数或者方法被调用时绑定...在 JavaScript 中这种问题比较常见, JavaScript 框架中例如 Backbone.js, jQuery 都自动为我们做好了绑定的工作, 所以在使用时 this 总是可以绑定到我们所期望的那个对象上...(user); Bind 方法允许我们实现函数借用在 JavaScript 中, 我们可以传递函数, 返回函数, 借用他们等等, 而 bind() 方法使函数借用变得极其简单...."; } } 接着我们使用 bind() 方法柯里化 greet() 方法. bind() 接收的第一个参数指定了 this 的值: // 在 greet 函数中我们可以传递 null, 因为函数中并未使用到

7443 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript 中 call()、apply()、bind() 的用法

在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数调用过程中的 this 指向 1 apply Function.apply...person1 = { firstName:"Bill", lastName: "Gates" } person.fullName.call(person1, "Seattle", "USA"); 3 bind...Function.bind(obj[,params...]) bind是ES5 新增的一个方法，它的传参和call类似，也是接收两个参数。...不会立即执行对应的函数，只是返回对函数的引用。...那为什么要引入bind呢，是因为call和apply会自动执行目标函数，从而无法绑定在事件上，因为事件是我们手动触发的，而bind不会自动执行目标函数。

1K12 11

【译】JavaScript中的call,apply,bind

在我们开始研究call, apply, bind之前，应该对how does "this" keyword works in JavaScript有所认知。...this"指向"window"对象（根据函数中"this"默认行为，它指向"window"对象）。...那就是call, apply, bind出现的地方。...现在，如果你想在代码很多地方使用带不同参数的"getDetails"函数。多次使用"call"和"apply"是一种解决方法，但是"bind"函数可以让这个过程更加容易。..."bind"方法创造了一个指向传入对象的"this"引用，这和"apply"或者"call"那样，但是其返回一个函数。现在，在你的代码中，这个函数通过不同参数被多次使用。

8162 0

JavaScript 中 call()、apply()、bind() 的用法

、apply()、bind() 都是用来重定义 this 这个对象的！...99 以上出了 bind 方法后面多了个 () 外，结果返回都一致！...由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。 2，对比call 、bind 、 apply 传参情况下 ?...从上面四个结果不难看出: call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了： call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔...bind 除了返回是函数以外，它的参数和 call 一样。当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！

1K3 0

理解JavaScript中的This,Bind,Call和Apply

this关键词在JavaScript中是个很重要的概念，也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中，this是一个对象的引用。...在Understanding Variables, Scope, and Hoisting in JavaScript中，你学习到函数中的变量有自己的上下文。...由于游戏逻辑需要用户输入，比如按键或点击事件，你可能想要bind事件去获取游戏逻辑类中的this的值。...如果在这里，你并没有使用箭头函数，this将等同于event.currentTarget，如没有显示绑定this，你将不能获取类中的值。这种策略通常使用在像React这样框架的类方法上。...总结在这篇文章中，你学到了关于JavaScript的this，和基于隐式运行时绑定的可能具有的不同值，以及通过bind，call和apply的显示绑定。

6474 0

谈谈JavaScript中的call、apply和bind

在JavaScript中，如果想要改变当前函数调用的上下文对象的时候，我们都会联想到call、apply和bind。比如下面?...问：call中为什么说 context.fn = this; // 让fn的上下文为context 呢？...问：bind中返回的参数为什么是传递(context, ...args, ...arguments)，而不是(context, ...args)呢？...答：这是为了包含返回函数也能传参的情况，也就是bind()()中的第二个括号可以传递参数。 call和apply哪个好？...参考 MDN web docs -- Function airuikun/Weekly-FE-Interview issues 《JavaScript高级程序设计》

5424 0

浅谈JavaScript中的apply,call和bind

bind() 的另一个用法则是让函数拥有预设参数，而又跟预设参数有所不同。...不过 bind() 所提供的预设参数功能与此不同。在我们的印象中， list3 应该输出 [1, 2, 3] 但实际输出的却是 [37, 1, 2, 3]。...因为 bind() 的特点，leadingThirtysevenList(1, 2, 3) 可以写为 list.bind(null, 37, 1, 2, 3)。...总结 apply() call() bind() 三者区别不大，都是用来改变函数的 this 指向。 apply() 把 this 所需参数放入一个数组，作为 apply() 的第二个参数传入。...bind() 返回对应函数，便于稍后调用，而 apply()、call()则立即调用由于其特性，使用起来千奇百怪，有各种各样有趣的用法，还等待我们去挖掘。

7253 0

JavaScript中apply、call、bind的区别与用法

apply()、call()和bind()方法都是Function.prototype对象中的方法，而所有的函数都是Function的实例。三者都可以改变this的指向，将函数绑定到上下文中。 1....语法: fun.bind(thisArg, 队列or数组)() 2. 用法这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。 2.1 普通写法 ?...不同之处在于，在给调用函数传递参数时，apply()是数组，call()参数是逐个列出的。 2.3 bind()的用法 ? bind方法传递给调用函数的参数可以逐个列出，也可以写在数组中。...总结bind()的用法：该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入bind()的第一个参数作为this，传入bind()的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数...//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind jianshu.com/

1.4K2 0

【译】理解JavaScript中的This,Bind,Call和Apply

1K2 0

Javascript bind polyfill

bind() 方法会创建一个新函数。...当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数首先 bind 不同于 call 和 apply 它不是调用后立即执行。...是指bind返回的函数传入的参数 var bindArgs = Array.prototype.slice.call(arguments); self.apply(context..., args.concat(bindArgs)); } } 下一步是使用 new 关键字的时候，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。...Function.prototype.bind = Function.prototype.bind || function () { };

7001 0

【说站】javascript中bind函数如何使用

javascript中bind函数如何使用说明 1、bind()函数会创建一个新函数，新函数与被调函数具有相同的函数体。...2、当目标函数被调用时this值绑定到bind()的第一个参数，该参数不能被重写。绑定函数被调用时，bind()也接受预设的参数提供给原函数。...实例 Function.prototype.bind = function(context,...params){ let self = this; return funtion(...innerArgs... params = params.concat(...innerArgs); return self.call(context,...params); } } 以上就是javascript...中bind函数的使用，希望对大家有所帮助。

1.6K2 0

JavaScript中call,apply,bind方法的使用及原理

在JavaScript里，call(),apply(),bind()都是Function内置的三个方法，它们的作用都是显示的绑定this的指向，三个方法的第一个参数都是this指向的对象，也就是函数在运行时执行的上下文...当我们定义一个新的对象，需要使用其他对象的方法的时候，我们不需要重新开发重复的方法逻辑，借助apply,apply,bind三个方法可以实现对这些的方法的调用。...bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用，第一个thisArg在setTimeout中创建一个函数时传递的原始值都会转化成...cacheFun.getCacheName(); // Name is cache let cacheName = cacheFun.getCacheName; cacheName(); // Name: global 在创建绑定函数的实例中...window对象，所以this.name获取的是global 我们需要借助bind方法，在函数调用的时候，绑定this的执行到cacheFun对象上： let cacheNameByBind = cacheName.bind

1.4K2 0

关于JavaScript中apply、call、bind的详细使用讲解

在JavaScript中我们对函数的执行通常是直接用函数的名称加个括号就可以进行调用了，但是这样调用有一个缺点，就是函数中的this指向是默认绑定的，有时候this的指向不太符合我们的预期。...至于JavaScript中this的指向可以看我这篇文章《在JavaScript中，this的指向详细讲解》那我们想要把函数的this指向变成我们预期想的那样有什么方法吗？...这时候JavaScript中的函数apply、call、bind调用就起到作用了applyapply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以==数组==的形式传入，==且当第一个参数为...==bind 返回的是一个新的函数，你必须调用它才会被执行。...])()//bind调用后的结果总结call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了。

3211 0

JavaScript 中 `apply`、`call` 和 `bind` 的具体理解与区别

JavaScript 中 apply、call 和 bind 的具体理解与区别apply、call 和 bind 是 JavaScript 中函数方法，用于改变函数的 this 指向，尤其在函数调用时动态绑定上下文对象...3.3 bind 的应用场景示例：事件处理时绑定上下文bind 通常用于创建函数的副本，并绑定特定的 this，特别是在事件处理时。...(`Button says: ${this.text}`); }};// 在 DOM 事件中绑定上下文const boundClickHandler = button.handleClick.bind...call参数数量固定，或明确传递的场景，适合动态切换上下文。bind创建一个新函数用于延迟调用，并绑定 this 和部分参数（如事件监听器）。...合理使用 apply、call 和 bind 可以提升代码的灵活性与可复用性，是 JavaScript 高级编程的重要技能。

2881 0

手写js中的bind

1.0" /> Document // 手写实现 bind...Function.prototype.bind = // Function.prototype.bind ||...getName1 = obj.getName; getName1(); // xiaoming let getName2 = obj.getName.bind...let getName4 = obj.getName.bind(obj, 111)(); // [111] xiaohong let getName5...= obj.getName.bind(obj, 111, 222)(); // [111, 222] iaohong let getName6 = obj.getName.bind

1.9K2 0

说下js中的bind

bind的受体是对象，返回的是个新的函数。我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。也就是无论怎么调用这个返回的函数都有同样的this值。...这就是bind的作用。语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。...this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。 arg1, arg2, ... 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。...//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind https://www.smashingmagazine.com.../2014/01/understanding-javascript-function-prototype-bind/#what-problem-are-we-actually-looking-to-solve

2.5K1 0

JavaScript深入之手写call、apply、bind

模拟实现call 将函数设为对象的属性执行该函数删除该函数 Function.prototype.myCall = function(context = window, ...args) {...context[fn](args) } else { result = context[fn] } delete context[fn] return result } 模拟实现bind...返回一个新函数新函数this指向bind的第一个参数其余参数作为新函数的参数传入 Function.prototype.myBind = function(context = window, ..

3611 0

【优雅代码】深入浅出妙用Javascript中apply、call、bind

apply、call 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。...JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call 。而不确定的时候用 apply，然后把参数 push 进数组传递进去。...中存在一种名为伪数组的对象结构。...因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。...答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind() 是无效的。

5392 0

javascript中bind绑定接收者与函数柯里化

，this对象指向的并不是obj，而是forEach的对象，forEach的对象是全局对象golobal；那想实现意图怎么办呢？...更好的办法是： arr.forEach(obj.add.bind(obj)); bind创建了一个新函数，这个函数跟obj.add一样，唯一不同的是，新函数把this绑定了obj 也就是说把add方法绑定给了接收者...你可以直接在bind方法里直接传递这个参数： arr.forEach(obj.add.bind(obj, "mytitle")); 最终的代码是： let obj = { add(title,...console.log(param); console.log(index) } } let arr = ['a', 'b', 'c']; arr.forEach(obj.add.bind...(obj, "mytitle")); 输出结果是： mytitle a 0 mytitle b 1 mytitle c 2 将函数与其参数的一个子集绑定的技术称为函数的柯里化；比起显式的封装函数，这样做更简洁

5302 0

点击加载更多

Javascript中的bind详解

JavaScript 中至关重要的 Bind

JavaScript 中 call()、apply()、bind() 的用法

【译】JavaScript中的call,apply,bind

JavaScript 中 call()、apply()、bind() 的用法

理解JavaScript中的This,Bind,Call和Apply

谈谈JavaScript中的call、apply和bind

浅谈JavaScript中的apply,call和bind

JavaScript中apply、call、bind的区别与用法

【译】理解JavaScript中的This,Bind,Call和Apply

Javascript bind polyfill

【说站】javascript中bind函数如何使用

JavaScript中call,apply,bind方法的使用及原理

关于JavaScript中apply、call、bind的详细使用讲解

JavaScript 中 `apply`、`call` 和 `bind` 的具体理解与区别

手写js中的bind

说下js中的bind

JavaScript深入之手写call、apply、bind

【优雅代码】深入浅出妙用Javascript中apply、call、bind

javascript中bind绑定接收者与函数柯里化

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐