手写系列 # 5:实现 bind 方法

简介: 手写系列 # 5:实现 bind 方法

实现


bind 跟 apply 、call 实现不同的地方在于,它返回的是一个函数。


bind 语法:


  • fun.bind(context, arg1, arg2, …)
  • context:当绑定函数被调用时,该参数会作为原函数运行时的this指向;当使用new操作符调用绑定函数时,该参数无效。
  • arg1,arg2…:绑定函数被调用时,这些参数将位于实参之前传递给绑定的方法。


Function.prototype.kaimoBind = function (context) {
  // 保存原函数
  const self = this;
  // bind 函数中的参数
  const args = [...arguments].slice(1);
  console.log(args);
  // 创建一个新函数
  return function () {
    // 这里的 arguments 是外部函数传入的
    console.log(arguments);
    return self.apply(context, args.concat(...arguments));
  }
}
const kaimoObj = {
  name: 'kaimo'
};
function kaimoTest() {
  console.log(this.name);
}
kaimoTest.kaimoBind(kaimoObj, [1,2])([3]);


dd6024929101431fb3d3181a92d2f539.png

目录
相关文章
|
8月前
05 # 手写 bind
05 # 手写 bind
58 0
|
8月前
03 # 手写 call
03 # 手写 call
45 0
|
5月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
41 2
手写call , apply , bind 方法的实现
|
6月前
|
JavaScript
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
36 0
|
前端开发 Shell
前端笔记之手写bind
前端笔记之手写bind
73 0
|
8月前
|
资源调度 JavaScript 前端开发
js高级进价 - 手写bind
js高级进价 - 手写bind
|
8月前
|
索引
08 # 手写 filter 方法
08 # 手写 filter 方法
51 0
|
前端开发 JavaScript
面试官:你会手写bind apply 和bind吗?
面试官:你会手写bind apply 和bind吗?