详解bind函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_42966484/article/details/111184696

本文详细介绍了JavaScript中bind函数的工作原理和实现方式，包括如何改变this指向、与call和apply的区别，以及处理new操作符创建对象时的情况。通过实例展示了bind函数在处理this上下文和参数传递中的关键作用，并讨论了在实现过程中避免影响原函数prototype的方法。

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

之前将call和apply的具体实现模拟写了一遍，今天就将bind函数的具体实现来写一遍看看
bind：一句话描述：将创建一个新函数，当这个函数被调用时，传入的第一个参数作为新的this对象，后续的参数作为绑定函数的参数，新函数与被调函数（绑定函数的目标函数）具有相同的函数体。
与call和apply相同点：都可以传递参数
不同点：apply和call是会具体执行该回调函数，而bind是返回一个函数
再补充一点：bind之后无法再次通过call和apply修改this指向
首先，我们实现一个简单的bind绑定

function bindFoo(){
   
	console.log('My name is ' + this.name);
}
var bindObj = {
   name : 'gui'}
var foo = bindFoo.bind(bindObj);  //改变this指向，并返回一个新的函数
foo();  //函数执行 输出My name is gui

所以从上面的代码我们可以看出，最重要的一点就是改变this指向，那么如何改变自然就可以想到之前分析过的call和apply来实现
所以通过call和apply的方式，我们可以简单的重写下bind函数

Function.prototype.bindFunc  = function (context){
   
	var _self = this;  //_self指向bindFoo函数
	//_self = function bindFoo(){ console.log('My name is ' + this.name); }
	return function(){
   
		// 通过apply来改变this对象
		_self.apply(context); 
	}
}

第二步，我们要和call，apply一致考虑参数的情况

function bindFoo(age, height, weight){
   
	console.log('My name is ' + this.name + '。age is ' + age + '。height is ' + height + '。weight is ' + weight);
}
var bindObj = {
   name :