宜宾网站建设公司

JavaScript深入理解系列：bind方法详解以及手写

定义

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

由定义可知，函数调用bind()方法的时候，会返回一个新函数，并且this指向bind函数的第一个参数，简单来表示。

10年积累的成都网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有班戈免费网站建设让你可以放心的选择与我们合作。

fn.bind(obj对象)执行 返回一个函数，想调用的时候，fn.bind(obj)()这样来执行;

举个例子：

var name = '炒米粉';
var obj = {
	name: '程序员米粉'
};
function fn() {
	console.log(this.name);
}

var getFn = fn.bind(obj); // 返回一个函数命名getFn
getFn(); // this.name => '程序员米粉'， this指向obj
fn(); // this.name => '炒米粉'， this指向window

总结：

1、bind()执行，返回一个函数。
2、bind()接受多个参数。

第1步：模拟返回一个函数

由上述定义以及总结可知，我们首先模拟一个函数调用bind()方法返回一个函数：

Function.prototype.myBind = function(context) {
	var context = context || window;
	var self = this;
	return function() {
		self.apply(context);
	};
};

// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
getFn(); // this.name => '程序员米粉'， this指向obj

apply实现可以看我以往写的 《javascript深入系列之手写call与apply》

那我们把fn再改造一下，加一个返回值

function fn() {
	console.log(this.name);
    return 1
}
// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
console.log(getFn()); // 发现并没有把目标值1返回回来

上面的例子getFn()执行发现并没有把目标值1返回回来，那我们需要myBind函数里面添加 return self.apply(context);

最终代码：

Function.prototype.myBind = function(context) {
	var context = context || window;
	var self = this;
	return function() {
        // 这里加了return
		return self.apply(context);
	};
};
// 使用一下
var getFn = fn.myBind(obj); // 返回一个函数命名getFn
console.log(getFn()); // 1, 目标值达到

第2步：模拟返回接受多个参数

我们先来看看bind是怎样接收多个参数的。还是原来的例子：

var name = '炒米粉';
var obj = {
	name: '程序员米粉'
};
function fn(age, weight) {
	console.log(this.name);
    console.log(age, weight);
}

// var getFn = fn.bind(obj, 18, 150); 
// getFn(); // this.name => '程序员米粉'，age, weight => 18, 150

// var getFn = fn.bind(obj); 
// getFn( 18, 150); // this.name => '程序员米粉'，age, weight => 18, 150

var getFn = fn.bind(obj, 18); 
getFn(150); // this.name => '程序员米粉'，age, weight => 18, 150

从例子可以看出来，参数可以在两个地方传进来。在用bind绑定函数fn的时候传参数18， fn.bind(obj, 18); 返回函数的时候传参数15 getFn(150)。

思考一下，我们如何把这两个地方传进来的参数合并一下。别问，我们可以用arguments对象获取传传进来的参数合并一下。那我们继续修改一下代码：

Function.prototype.myBind = function(context) {
	var context = context || window;
	var self = this;
     // myBind函数传进来的参数，从第2个开始取 
    var args = arguments.length && Array.prototype.slice.call(1, arguments.length) || [];
     // array.slice(start, end)
	return function() {
        // 返回函数传进来的参数，从第1个开始取 
        var arr = arguments.length && Array.prototype.slice.call(0, arguments.length) || [];
		return self.apply(context, arr.concat(args));
	};
};

var getFn = fn.bind(obj, 18); 
getFn(150); // age, weight => 18, 150

好了我们已经搞定了总结里面的两点了。

第3步：模拟构造函数效果

bind()方法还有一种特殊的用法，那就是原函数使用bind()方法绑定函数之后，原函数可以作为构造函数使用的。

绑定函数自动适应于使用 new 操作符去构造一个由目标函数创建的新实例。当一个绑定函数是用来构建一个值的，原来提供的 this 就会被忽略。 --来源moz

这什么意思呢？那我们先来代码看一下：

var name = '炒米粉';
var obj = {
	name: '程序员米粉'
};
function fn(age, weight) {
	console.log(this.name);
	console.log(age, weight);
    this.phoneNumber = ''
}

fn.prototype.haveMoney = 'NO';
var getFn = fn.bind(obj, 18);
// 通过使用bind()方法返回的绑定函数，可以使用new创建实例对象。fn的this不再指向obj，而是新创建的对象newObj
var newObj = new getFn(150); 
// fn函数
// this.name => undefined;
// age, weight => 18, 50
newObj.haveMoney // => 'NO'
newObj.phoneNumber // => ''

由上面的例子可以看出来this.name变成了undefined，为什么呢？由于使用了new创建了新对象newObj，this.name中的this失效了，this指向了newObj，如果没有用new创建新对象，this是指向bind(obj)中的obj的。原函数fn就作为了一个构造函数使用，所以newObj作为new创建出来的实例，可以继承fn的原型上的属性和方法，可见 newObj.haveMoney // => 'NO',newObj.phoneNumber // => ''

继续改进一下我们myBind方法：

var name = '炒米粉';
var obj = {
	name: '程序员米粉'
};
function fn(age, weight) {
	console.log(this.name);
	console.log(age, weight);
	this.phoneNumber = '';
}

fn.prototype.haveMoney = 'NO';

Function.prototype.myBind = function(context) {
	var context = context || window;
	var self = this;
	// myBind函数传进来的参数，从第2个开始取
	var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
	var returnFn = function() {
		var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
        // this instanceof returnFn 什么意思？这是一个判断对象是否属于继承于当前对象
        // 如果为true，那就是返回的函数returnFn作为了一个构造函数使用，那么this指向新实例，不再是context
        // 如果为false，那就是返回的函数returnFn作为了一个普通函数使用，那么this指向context或者window

		return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
	};
    // 这样写，使returnFn作为一个构造函数使用的时候，那么通过原型继承的方法，returnFn可以继承当前对象里面原型上面所有属性和方法
    // 修正prototype之后，创建的新实例，可以继承原型的属性和方法，例如例子，实例newObj继承了，this.phoneNumber中的属性值。
    returnFn.prototype = this.prototype;
	return returnFn;
};

var getFn = fn.myBind(obj, 18);
var newObj = new getFn(150);
// console.log(this.name); => undefined;
// console.log(age, weight); => 18, 50
newObj.haveMoney // => 'NO'
newObj.phoneNumber // => ''

上面例子比较难懂就是this instanceof returnFn ? this : context 与 returnFn.prototype = this.prototype;，这都是跟js里面的原型继承相关知识点。

第4步：最终版本

好了，我们已经完成了90%了，但是还有点小瑕疵，关于原型继承的，我们先来看看例子：

function fn() {}
Function.prototype.myBind = function(context) {
	var context = context || window;
	var self = this;
	// myBind函数传进来的参数，从第2个开始取
	var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];

	var returnFn = function() {
		var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
        // this instanceof returnFn 什么意思？这是一个判断对象是否属于继承于当前对象
        // 如果  为true，那就是返回的函数returnFn作为了一个构造函数使用，那么this指向新实例，不再是context
        // 如果 为false，那就是返回的函数returnFn作为了一个普通函数使用，那么this指向context或者window

		return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
	};
    // 这样写，使returnFn作为一个构造函数使用的时候，那么通过原型继承的方法，returnFn可以继承当前对象里面原型上面所有属性和方法
    // 修正prototype之后，创建的新实例，可以继承原型的属性和方法，例如例子，实例newObj继承了，this.phoneNumber中的属性值。
    returnFn.prototype = this.prototype;
	return returnFn;
};
var getFn = fn.myBind(obj);
getFn.prototype.text = '我是被bind方法返回的函数'
console.log(fn.prototype.text) // '我是被bind方法返回的函数'，理论上这里不应该被修改，应该为undefined

由上述例子可以看出来，我们只是修改了通过用了bind方法返回函数的prototype对象添加了属性，那么原函数的原型对象prototype也被修改了。这样是不行的。所以我们继续优化了方法。

function fn() {}
Function.prototype.myBind = function(context) {
	if (typeof this !== 'function') {
		throw new Error('The bind method is not available');
	}
	var context = context || window;
	var self = this;
	// myBind函数传进来的参数，从第2个开始取
	var args = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];

	var returnFn = function() {
		var arr = (arguments.length && Array.prototype.slice.call(1, arguments.length)) || [];
		return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
	};

    var templateFn = function() {};
    // 修正prototype之后，templateFn可以继承原函数原型的属性和方法
    templateFn.prototype = this.prototype;
    // 创建空函数实例，然后给returnFn的原型继承，returnFn创建的实例可以继承templateFn方法。
    // 这样修改了returnFn原型方法，都影响不了 原函数myBind原型对象，只会影响空函数templateFn。妙妙妙啊。
    returnFn.prototype = new templateFn();
	return returnFn;
};

var getFn = fn.myBind(obj);
var newObj = new getFn();
getFn.prototype.text = '我是被bind方法返回的函数'
console.log(fn.prototype.text) // => undefined

上述例子，可以看出来我们通过一个空函数 var templateFn = function() {};，那么空函数templateFn的原型继承原函数myBind的原型对象，再把返回函数returnFn继承空函数templateFn的实例属性和方法。这样子改变返回函数templateFn的原型对象，不再影响原函数了myBind原型对象，简直一个妙字。

防止调用不是函数情况

if (typeof this !== 'function') {
		throw new Error('The bind method is not available');
	}

题外话：apply、call、bind三者的区别

  • 三者都可以改变函数的this对象指向。

  • 三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window。

  • 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入，bind是返回绑定this之后的函数，apply、call 则是立即执行。

结语

希望看完这篇文章对你有帮助：

  • 理解bind原理
  • 实践写一个bind方法
  • 区分apply、call、bind三者的区别

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。

欢迎关注公众号：【程序员米粉】
公众号分享开发编程、职场晋升、大厂面试经验


网站栏目：JavaScript深入理解系列：bind方法详解以及手写
路径分享：http://ybzwz.com/article/dsojphi.html

其他资讯