JavaScript深入理解系列：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創建了新對象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三者的區別

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

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