手写 实现bind()

最新推荐文章于 2025-06-05 15:44:37 发布
原创 最新推荐文章于 2025-06-05 15:44:37 发布 · 870 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #面试

本文详细介绍了如何逐步实现JavaScript中的bind()方法，包括无参数版、带参数版以及如何处理原函数作为构造函数的情况。通过理解这些实现，可以深入掌握bind()的工作原理以及在不同场景下的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

逐步实现js的bind方法

  1. 原函数无参数版 bind
  2. 原函数带参数版 bind
  3. 区分原函数是否作为构造函数
一. 原函数无参数版 bind
  1. 原函数作为新_context对象内的属性，在对象中调用，即可使用_context的作用域
  2. 根据 bind 要求返回闭包

  1. ES6之前

    Function.prototype.myBind = function(_context){
	// _context检测
	_context = _context? _context: window;
	let that = this;
	// 按要求返回闭包(函数)
	return function(){
		// 函数挂入_context内
		_context.__fn = that;
		// 函数调用
		let result = _context.__fn();
		// 删除_context内的新函数
		delete _context.__fn;
		return result;
	}
}

  2. ES6之后

    Function.prototype.myBind = function(_context){
	// _context检测
	_context = _context? _context: window;
	// 按要求返回闭包(函数)
	return () => {
		// 函数挂入_context内
		let fnKey = Symbol();
		_context[fnKey] = this;
		// 函数调用
		let result = _context[fnKey]();
		// 删除_context内的新函数
		delete _context[fnKey];
		return result;
	}
}
二、原函数带参数版 bind

原函数的参数可能在bind时指定，也可能在调用绑定新作用域后的新函数中指定，也可能都有。

  1. 在 bind 中接收参数，并在闭包中于闭包参数合并为完整参数，再一起提供给新函数。
  2. ES6之前没有解构语法，使用 恶魔方法 eval 进行函数调用

  1. ES6之前

    Function.prototype.myBind = function(_context){
	// _context检测
	_context = _context? _context: window;
	let that = this;
	// 参数获取
	let outerArgs = [];
	let argumentsOut = arguments;	// 与闭包中的arguments区分开
	for(let i=1, len=arguments.length; i<len; i++){
		outerArgs.push('argumentsOut[' + i + ']');
	}
	// 按要求返回闭包(函数)
	return function(){
		// 参数补充
		let innerArgs = [];
		for(let i=0, len=arguments.length; i<len; i++){
			innerArgs.push('arguments[' + i + ']');
		}
		let args = outerArgs.concat(innerArgs);
		// 函数挂入_context内
		_context.__fn = that;
		// 函数调用
		let result = eval('_context.__fn(' + args + ')');
		// 删除_context内的新函数
		delete _context.__fn;
		return result;
	}
}

  2. ES6之后（箭头函数获取函数参数）

    Function.prototype.myBind = function(_context, ..._args){
	// _context检测
	_context = _context? _context: window;
	// 参数获取
	let outerArgs = _args? _args: [];
	// 按要求返回闭包(函数)
	return (..._args) => {
		// 参数补充
		let args = _args? outerArgs.concat(_args): outerArgs;
		// 函数挂入_context内
		let fnKey = Symbol();
		_context[fnKey] = this;
		// 函数调用
		let result = _context[fnKey](...args);
		// 删除_context内的新函数
		delete _context[fnKey];
		return result;
	}
}
三、区分原函数是否作为构造函数

当原函数作为构造函数时，bind() 用于绑定作用域的第一个参数将会失效，后续参数将继续作为构造函数的参数继续被使用。

function F(_arg1){
	this.x = _arg1;
	this.fn = function(){
		console.log(this.x)
	}
}
let Func = F.bind({x: 100}, 1);
let fo = new Func();
fo.fn();		// 1
  1. 新增原函数是否作为构造函数的判断
    注：箭头函数不能作为构造函数

  1. ES6之前

    Function.prototype.myBind = function(_context){
	// _context检测
	_context = _context? _context: window;
	let that = this;
	// 参数获取
	let outerArgs = [];
	let argumentsOut = arguments;	// 与闭包中的arguments区分开
	for(let i=1, len=arguments.length; i<len; i++){
		outerArgs.push('argumentsOut[' + i + ']');
	}
	// 按要求返回闭包(函数)
	return function F(){
		// 参数补充
		let innerArgs = [];
		for(let i=0, len=arguments.length; i<len; i++){
			innerArgs.push('arguments[' + i + ']');
		}
		let args = outerArgs.concat(innerArgs);
		
		if(this instanceof F) {
			// 构造函数
			return eval('new that(' + args + ')');
		}
		
		// 函数挂入_context内（这里最好做个键备份）
		_context.__fn = that;
		// 函数调用
		let result = eval('_context.__fn(' + args + ')');
		// 删除_context内的新函数
		delete _context.__fn;
		return result;
	}
}

  2. ES6之后

    Function.prototype.myBind = function(_context, ..._args){
	// _context检测
	_context = _context? _context: window;
	// 参数获取
	let outerArgs = _args? _args: [];
	// 按要求返回闭包(函数)
	return function F(..._args) {	// 箭头函数不能作为构造函数
		// 参数补充
		let args = _args? outerArgs.concat(_args): outerArgs;
		
		if(this instanceof F){
			// 构造函数
			return new that(...args);
		}
		
		// 函数挂入_context内
		let fnKey = Symbol();
		_context[fnKey] = that;
		// 函数调用
		let result = _context[fnKey](...args);
		// 删除_context内的新函数
		delete _context[fnKey];
		return result;
	}
}
js 手写实现bind方法
wxid_mtnujb6ipc0322的博客
02-22 1149
在实现bind方法之前，我们知道call、apply和bind是三个重要的函数方法，它们都与函数调用和this关键字有关。本文将讲解它们之间的使用和区别以及bind的实现思路。
简洁的代码，详细的解释，每个前端er都要会的手写bind方法。
qq_46115413的博客
02-24 829
手写bind前言一、思路梳理二、bind方法的实现三、测试结果展示四、实现的详解4.1 获取需要调用目标function的对象4.2 获取被调用的目标function4.3 目标function参数的获取结语 前言 又是一年的金三银四，疯狂的手写剧情再度上演，接下来就让我们一起来实现下JavaScript里的bind函数。 一、思路梳理 在实现手写bind之前让我们先来梳理下bind函数的使用场景。通常我们在使用bind的时候，需要两个对象（所有的一切都是对象🙈）： 想要执行的function（我们假设叫
bind函数实现
maogugu0319的博客
05-07 751
一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一系列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出 bind 函数的两个特点： 返回一个函数 可以传入参数 返回函数的模拟实现 从第一个特点开始，我们举个例子： var foo = { valu...
JS手写代码篇---bind手写
最新发布
2403_88913721的博客
06-05 223
今天手写了bind，通过前两天的手写call和apply对于改变this指向我已经是很熟悉了，唯一不同的就是bind返回一个新的函数，函数也是要执行参数的，这一点没有太注意。
手写JS函数的call、apply、bind实现
YiYing's sharing
12-01 975
  之所以要写这篇，是因为曾经面试被要求在白纸上手写bind实现   结果跟代码一样清晰明确，一阵懵逼，没写出来！   下面，撸起袖子就是干！~   把call、apply、bind一条龙都整一遍！~~ call 定义与使用 Function.prototype.call(): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re...
深入bind
weixin_33800463的博客
02-20 183
今天来聊聊bind 关于之前的call跟apply 查看此链接 我们要明确4点内容 1. bind之后返回一个函数 let obj = { name : 'skr' } function fn(){ console.log(this) } let bindfn = fn.bind(obj) console.log(type...
手写bind
qq_42286878的博客
02-08 106
手写bind
前端开发攻略---手写bind函数，看这篇就够了。
nibabaoo的博客
05-08 610
手写JavaScript中的bind函数
bind.js ES5的bind手写实现
04-17
ES5的bind手写实现
js代码-手写bind
07-14
以下是一个简单的手写`bind`的实现： ```javascript Function.prototype.myBind = function(newThis, ...fixedArgs) { const fn = this; function boundFn(...callArgs) { const finalArgs = fixedArgs.concat...
js手写bind
qq593249106的博客
10-18 2373
前端面试题之JS手写bind 首先解释一下bind： bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 给个例子： var value = 'v in window'; function func() { console.log(this.value)...
极简实现系列——手写bind
laishaojiang的博客
06-15 422
自己简易实现系列——是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件 之前写过call和apply的原理实现，bind的实现原理也类似。先来看看MDN上关于bind的介绍： bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 看个简单的例子： let obj = { value: 1 } function fn(a,b){ ...
【手撕代码系列】JS手写实现bind方法
CreatorRay的博客
05-10 1416
公众号：Code程序人生，分享前端所见所闻在JavaScript中，bind方法允许我们绑定函数的上下文并返回一个新的函数。在这篇文章中，我们将手写实现bind方法，以更好地了解它的内部工作原理。
手写 bind 方法，超级详细
CoderBin的博客
09-17 2947
大家好，我是CoderBin，本次给大家分享 JS 手撕代码系列，bind 方法的实现，希望大家有所收获，谢谢。
全网最详细手写bind
qq_52648305的博客
08-09 1902
代码】全网最详细手写bind。
bind、call、apply的区别、实现逻辑？手写实现 bind、call、apply方法
小草莓的博客
07-21 3081
函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。call 和 apply 会立即执行函数，而 bind 不会执行函数，而是返回一个改变了 this 指向的新的函数。本质都是为了改变函数运行时的执行上下文，使得函数在执行过程中的 this 值得到绑定并且传入指定的参数。而 apply 是传入一个数组。将待执行的函数作为上下文对象的属性，巧妙的改变了 this 的指向，并且立即指向该函数。
手写 bind 函数
qq_45803050的博客
11-01 2185
一. 首先bind 函数的三个特点： 1. 改变this指向 2. 第一个参数是 this的值后面的参数是 函数接收的参数的值 3. 返回值不变 二. 实现第一种：简易版实现 简易版实现 bind 函数 ，尽量不使用，但是可以借助里面的思想 <script> /** * bind 函数的三个特点： * 1. 改变this指向 * 2. 第一个参数是 this的值，后面的参数是 函数接收的参数的值
手写JS bind函数的实现技巧
资源摘要信息:"js代码-手写 bind" 在JavaScript中，bind()方法是Function.prototype的一个方法，用于创建一个新的函数，当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值