bind函数_JS之bind函数原理、使用及模拟实现

原理

1. bind的函数式挂在Function的原型上的。
2. bind方法与call&apply最大的不同就是前者返回一个绑定上下文的函数，而后者是直接执行了函数；bind方法返回的函数，可以继续添加参数。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

特性

1. 可以指定this。
2. 返回一个新函数。
3. 可以传入参数。
4. 柯里化。

使用场景

个人理解：在函数内内部在不知道this指向谁时希望指定自己明确的对象的并返回新的函数时候，使用它。

1. 使用延迟setTimeout函数时，this指向问题：在没有箭头函数前，使用bind函数改变this指向。
2. 改变监听事件中的this指指向，如jQuery中on的监听返回的对象this是重新定义的，将原有的this放在对象中的el中。现有的this为重建的构造对象。

模拟实现

为什么需要自己实现bind函数？

1、ES5之前不支持（IE8以下不支持）。
2、了解与学习源码思想与设计。

Function.prototype.bind2 = function(context) {
	// 检测当前调用者不是函数时报错，不予执行。
	if (typeof this !== 'function') {
		throw new Error('Function.prototype.bind - what is trying to be bound is not callable')
	}
	// this执行复制给新的变量保存(闭包)
	var seft = this;
	// 应为第一个参数传的是this,所有截取除了this之后的参数
	var args1 = Array.prototype.slice.call(arguments, 1);
	// 创建空对象
	var Func = function() {};
	var fBound = function() {
		// 将返回的新函数传入的参数转换新数组并与上面截取的数组合并
		var bindArgs = args.concat(Array.prototype.slice.call(arguments));
		// 当返回的新函数作为构造函数时，this是指向实例，结果判断为true，将绑定函数的this当前本身的this；
		// 如果是普通函数，this指向的是windows，结果判断为false，将绑定函数的this指向context；
		var vm = this instanceof Func ? this : context;
		// 将绑定函数的this指向特定的对象，参入绑定的参数集。
		return seft.apply(vm, bindArgs);
	}
	// 这里可以使用Object.create，但是这是ES5中的方法
	// 将空对象的原型指向绑定函数的原型
	Func.prototype = this.prototype;
	// 在将空对象的实例赋值给 fBound.prototype
	fBound.prototype = new Func();
	// 返回一个新的函数
	return fBound;
}

后续更新模拟实现拆解步骤。。。