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

  • JavaScript深入理解系列:bind方法详解以及手写已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

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


定义

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

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

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 = '188888888' }  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 // => '188888888' 

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

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

var name = '炒米粉'; var obj = { 	name: '程序员米粉' }; function fn(age, weight) { 	console.log(this.name); 	console.log(age, weight); 	this.phoneNumber = '188888888'; }  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 // => '188888888' 

上面例子比较难懂就是this instanceof returnFn ? this : contextreturnFn.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三者的区别

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

欢迎关注