手写bind方法

本文详细介绍了如何封装一个JavaScript的bind方法,确保其行为与原生bind一致。重点讨论了参数获取、this的设置、apply或call的使用以及返回待执行函数的逻辑。此外,还展示了不同类型的参数(包括基础数据类型和null/undefined)在bind方法中的处理方式,并强调了封装方法必须保持与原生方法相同的行为特性。
摘要由CSDN通过智能技术生成

自己封装一个bind方法,需要考虑以下几点:

  • 参数的获取(方法里面的参数和bind返回的函数的参数)
  • this的设置(会转换基础数据类型为对象,null和undedined转换为windos对象)
  • apply或者call的使用
  • 返回待执行函数而不是执行函数
Function.prototype.myBind = function(...arg) {
	// 拿到bind方法的参数
	let obj = arg[0]
	// 拿到执行的函数
	let fn = this
	// 获取去除this指向的参数
	let params = arg.slice(1)
	// 根据obj的类型对象obj进行封装,因为原生bind会将基础数据类型装换为对象
	// null于undefined转换为window
	if(obj === null || obj === undefined) {
		obj = window
	}else if(typeof obj === 'number') {
		obj = Number(obj)
	}else if(typeof obj === 'string') {
		obj = String(obj)
	}else if(typeof obj === 'boolean') {
		obj = Boolean(obj)
	}
	// 返回一个待执行函数
	return function(...arg2) {
		params = params.concat(arg2)
		return fn.call(obj, ...params)
	}
}

var test = function (a, b, c) {
  console.log("x=" + this.x, "a=" + a, "b=" + b, "c=" + c);
};
var o = {
  x: 1,
};
test.bind(o, 1)(2, 3); //x=1 a=1 b=2 c=3

值得一提的是,在使用bind方法的函数里面打印this(也就是函数的第一个参数),会将基础数据类型转换为对象进行打印。null和undefined会会转换为window对象。

test.bind([])(); //[]
test.bind(1)(); //Number {1}
test.bind('1')(); //String {"1"}
test.bind(true)();  //Boolean {true}
test.bind(null)();  //window
test.bind(undefined)();  //window
test.bind(function(){})();  //ƒ (){}
test.bind(Symbol())() //Symbol {Symbol()}

所以我们封装的方法也要跟原生保持一致。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值