咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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方法详解以及手写
文章URL：http://dzwzjz.com/article/dsojphi.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
行业新闻 建站学堂 常见问题
联系我们
公司地址 人才招聘
成都 达州
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：达州市南岸区弹子石腾龙大道58号2栋21-6
友情链接： 网站运维托管   成都微信开发   内江网站建设   关键词优化   成都微信小程序开发   轻质隔墙板   成都网站设计   APP定制   定制网站建设   绵阳网站制作公司   
版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
在线咨询
服务热线
服务热线：028-86922220
TOP