定義

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創建了新物件newObj，this.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 : 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三者的區別

文中如有錯誤，歡迎在評論區指正，如果這篇文章幫助到了你，歡迎點贊和關注，后續會輸出更好的分享，

歡迎關注公眾號：【程式員米粉】
公眾號分享開發編程、職場晉升、大廠面試經驗

本文來自博客園，作者：程式員米粉，轉載請注明原文鏈接：https://www.cnblogs.com/GoodPingGe/p/16145269.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458241.html

標籤：其他

上一篇：JavaScript知識總結 ES6篇

下一篇：cookie和localstorge、sessionStorge的區別

JavaScript深入理解系列：bind方法詳解以及手寫

定義

第1步：模擬回傳一個函式

第2步：模擬回傳接受多個引數

第3步：模擬建構式效果

第4步：最終版本

題外話：apply、call、bind三者的區別

結語