自定义实现JS中的bind方法

最新推荐文章于 2024-04-19 22:04:37 发布

webchang

最新推荐文章于 2024-04-19 22:04:37 发布

阅读量259

点赞数 2

分类专栏： JS 文章标签： js bind this 前端

本文链接：https://blog.csdn.net/weixin_43974265/article/details/115478364

版权

本文探讨了JavaScript中bind方法的功能，它用于固定函数内部的this指向。通过两种不同的实现方式，阐述了bind方法如何接受指定对象作为上下文，并能接收额外参数。此外，还推荐了一个前端学习交流的QQ群。

摘要由CSDN通过智能技术生成

bind方法要实现什么功能？

bind()方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。
bind()方法的第一个参数就是所要绑定this的对象，后边可以接收更多的参数。
bind()方法返回的新函数也可以接收参数。

方式1

function myBind(fn, newThis, ...arg1) {
   
  return function (...arg2) {
   
    let args = arg1.concat(arg2);
    return fn.apply(newThis, args); // 注意要 return 一下&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webchang

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript--自定义bind函数

ahiai的博客

03-28

347

bind函数介绍 bind函数实际上是柯理化思想。大函数执行返回一个小函数，执行大函数，把需要准备的内容准备好、当前大函数的执行上下文因为小函数的引用关系就不能销毁了，形成了闭包。这样事先准备好的内容就能保存下来，当执行小函数时就会用到大函数里保存的信息。这相当于大函数预先把信息存储起来，以后用的时候直接在小函数中调用即可。实现bind函数最外围是一个立即执行函数，在立即执行函数中完成使用...

自定义实现js的bind()方法

落日夕霞的博客

12-01

1505

自定义实现js的bind()方法

3 条评论您还未登录，请先登录后发表或查看评论

JavaScript自定义函数——bind()事件绑定

qq_43799743的博客

06-10

339

直接拿走，兼容IE8 /*** * 指定元素绑定响应函数 * @param obj 绑定事件的对象 * @param eventStr 事件字符串(不要on) * @param callBack 回调函数 */ function bind(obj, eventStr, callBack) { if (obj.addEventListener){ //大部分浏览器 obj.addEventListener(eventStr, call

真懂了？自定义实现 Javascript 中的 call、apply 和 bind 方法

最新发布

惊蛰小鱼的博客

04-19

551

通常情况下，在调用函数时，函数内部的 this 的值是访问该函数的对象。利用callapply和bind，你可以在调用现有函数时将任意值分配给this，而无需先将函数作为属性附加到对象上。这使得你可以将一个对象的方法用作通用的实用函数。

如何自己实现bind方法

关注个人网站定时更新好玩的特效

02-08

233

bind 实现

javascript中利用柯里化函数实现bind方法

10-22

通过文章中提供的自定义bind方法实现代码，我们可以更加深入地理解和掌握JavaScript中柯里化函数的应用以及bind方法的内部机制。这不仅对理解JavaScript的函数式编程风格有帮助，而且对于提高函数的灵活性和复用性也...

关于原生js中bind函数的简单实现

10-21

以下是对原生JS中`bind`函数简单实现的详细解释：首先，我们要检查当前环境是否已经内置了`bind`函数，如果没有，我们将自定义一个： ```javascript if (!Function.prototype.bind) { Function.prototype.bind =...

在JavaScript中正确引用bind方法的应用

10-24

这个自定义的bind函数创建并返回一个新的函数，这个新的函数在被调用时会使用apply方法把原始函数中的this设置为传入的context参数，从而确保函数的上下文总是正确。以上就是bind方法在JavaScript中应用的核心知识...

详解vue中v-bind:style效果的自定义指令

10-15

总结来说，Vue中的`v-bind:style`结合自定义指令，可以实现更灵活的样式绑定和动态更新。自定义指令的生命周期钩子函数提供了一种方式，让我们能在不同阶段对DOM进行精确控制，适应各种复杂场景。在实际开发中，...

js中的bind方法并模拟实现自己的bind方法

前端三脚猫的博客

07-04

531

Js中bind方法使用和实现前面我们已经模拟实现了call和apply方法，今天来实现下同样可以改变this指向但是又有点不同得方法 bind方法。定义首先来看下bind方法在mdn中得定义，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。语法 function.bind(thisArg[, arg1[, arg2[, …]]]) 参数 thisArg 调用绑定函数时作为 th

简单实现bind方法

weixin_44718825的博客

04-08

211

Function.prototype.myBind = function () { // 保存调用栈 const fn = this; // 第一个参数为新函数的this const self = arguments[0]; // bind参数 const args = Array.prototype.slice.call(arguments, 1); // 使用 apply 来改变指向 // return function (){ // fn.apply(self,

js实现一个bind函数

weixin_43837268的博客

08-19

249

// 思路：类似call，但返回的是函数 Function.prototype.mybind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } let _this = this let arg = [...arguments].slice(1) ...

js利用trigger和bind实现自定义事件的定义和触发

ITzhongzi的博客

01-09

2605

示例一：看一组示例demo：（js实现事件模型bind与trigger） function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Emitter.prototype.bind = function (eventName,

自己实现bind函数【转载】

harry_yaya的博客

03-19

441

看到一篇讲如何自己实现bind的过程，这篇讲的特别清晰，过程明了。建议跟着博客打开开发者工具自己敲一下试试。会很有收获。然后这里有一点再补充一下两点可能理解起来不是很清晰或者容易犯糊涂的地方。 if (!Function.prototype.bind) { Function.prototype.bind = function () { var self = this, ...

js实现bind函数效果

神以灵的博客

05-30

1281

今天面试被问了个bind函数实现问题，实现功能如下(可能是为了一些不能使用原生bind函数的场景，具体的支持情况可以到can i use查看)： // 实现mybind函数，输出'wang~' var Cat = { say: function() { console.log(this.content); }, content: 'mia...

用原生js实现bind

u010693018的博客

03-06

904

用原生js实现bind 按使用情况来实现使用bind来实现继承或者绑定数据示例 function Animal(name, color) { this.name = name; this.color = color; this.type = 'Animal' } Animal.prototype.say = functi...

bind方法的实现

mapbar_front的博客

04-26

1798

bind方法的作用：就是进行this绑定。他的返回值是一个函数，返回的函数中的this就是bind的参数对象。可以这样的进行简单的实现： function bind(fn, context){ return function(){ return fn.apply(context,arguments); } } 在原生JavaScript中，bind是一种Fu...