重慶分公司
重慶分公司
bind() 方法創(chuàng)建一個(gè)新的函數(shù)，在 bind() 被調(diào)用時(shí)，這個(gè)新函數(shù)的 this 被指定為 bind() 的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。
由定義可知，函數(shù)調(diào)用bind()方法的時(shí)候，會(huì)返回一個(gè)新函數(shù)，并且this指向bind函數(shù)的第一個(gè)參數(shù)，簡(jiǎn)單來(lái)表示。
10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有班戈免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
fn.bind(obj對(duì)象)執(zhí)行 返回一個(gè)函數(shù)，想調(diào)用的時(shí)候，fn.bind(obj)()這樣來(lái)執(zhí)行;
舉個(gè)例子：
var name = '炒米粉';
var obj = {
name: '程序員米粉'
};
function fn() {
console.log(this.name);
}
var getFn = fn.bind(obj); // 返回一個(gè)函數(shù)命名getFn
getFn(); // this.name => '程序員米粉'， this指向obj
fn(); // this.name => '炒米粉'， this指向window
總結(jié)：
1、bind()執(zhí)行，返回一個(gè)函數(shù)。
2、bind()接受多個(gè)參數(shù)。
由上述定義以及總結(jié)可知，我們首先模擬一個(gè)函數(shù)調(diào)用bind()方法返回一個(gè)函數(shù)：
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
return function() {
self.apply(context);
};
};
// 使用一下
var getFn = fn.myBind(obj); // 返回一個(gè)函數(shù)命名getFn
getFn(); // this.name => '程序員米粉'， this指向obj
apply實(shí)現(xiàn)可以看我以往寫的 《javascript深入系列之手寫call與apply》
那我們把fn再改造一下，加一個(gè)返回值
function fn() {
console.log(this.name);
return 1
}
// 使用一下
var getFn = fn.myBind(obj); // 返回一個(gè)函數(shù)命名getFn
console.log(getFn()); // 發(fā)現(xiàn)并沒(méi)有把目標(biāo)值1返回回來(lái)
上面的例子getFn()執(zhí)行發(fā)現(xiàn)并沒(méi)有把目標(biāo)值1返回回來(lái)，那我們需要myBind函數(shù)里面添加 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); // 返回一個(gè)函數(shù)命名getFn
console.log(getFn()); // 1, 目標(biāo)值達(dá)到
我們先來(lái)看看bind是怎樣接收多個(gè)參數(shù)的。還是原來(lái)的例子：
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
從例子可以看出來(lái)，參數(shù)可以在兩個(gè)地方傳進(jìn)來(lái)。在用bind綁定函數(shù)fn的時(shí)候傳參數(shù)18， fn.bind(obj, 18); 返回函數(shù)的時(shí)候傳參數(shù)15 getFn(150)。
思考一下，我們?nèi)绾伟堰@兩個(gè)地方傳進(jìn)來(lái)的參數(shù)合并一下。別問(wèn)，我們可以用arguments對(duì)象獲取傳傳進(jìn)來(lái)的參數(shù)合并一下。那我們繼續(xù)修改一下代碼：
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
// myBind函數(shù)傳進(jìn)來(lái)的參數(shù)，從第2個(gè)開(kāi)始取
var args = arguments.length && Array.prototype.slice.call(1, arguments.length) || [];
// array.slice(start, end)
return function() {
// 返回函數(shù)傳進(jìn)來(lái)的參數(shù)，從第1個(gè)開(kāi)始取
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
好了我們已經(jīng)搞定了總結(jié)里面的兩點(diǎn)了。
bind()方法還有一種特殊的用法，那就是原函數(shù)使用bind()方法綁定函數(shù)之后，原函數(shù)可以作為構(gòu)造函數(shù)使用的。
綁定函數(shù)自動(dòng)適應(yīng)于使用 new 操作符去構(gòu)造一個(gè)由目標(biāo)函數(shù)創(chuàng)建的新實(shí)例。當(dāng)一個(gè)綁定函數(shù)是用來(lái)構(gòu)建一個(gè)值的，原來(lái)提供的 this 就會(huì)被忽略。 --來(lái)源moz
這什么意思呢？那我們先來(lái)代碼看一下：
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);
// 通過(guò)使用bind()方法返回的綁定函數(shù)，可以使用new創(chuàng)建實(shí)例對(duì)象。fn的this不再指向obj，而是新創(chuàng)建的對(duì)象newObj
var newObj = new getFn(150);
// fn函數(shù)
// this.name => undefined;
// age, weight => 18, 50
newObj.haveMoney // => 'NO'
newObj.phoneNumber // => ''
由上面的例子可以看出來(lái)this.name變成了undefined，為什么呢？由于使用了new創(chuàng)建了新對(duì)象newObj，this.name中的this失效了，this指向了newObj，如果沒(méi)有用new創(chuàng)建新對(duì)象，this是指向bind(obj)中的obj的。原函數(shù)fn就作為了一個(gè)構(gòu)造函數(shù)使用，所以newObj作為new創(chuàng)建出來(lái)的實(shí)例，可以繼承fn的原型上的屬性和方法，可見(jiàn) newObj.haveMoney // => 'NO',newObj.phoneNumber // => ''
繼續(xù)改進(jìn)一下我們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函數(shù)傳進(jìn)來(lái)的參數(shù)，從第2個(gè)開(kāi)始取
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 什么意思？這是一個(gè)判斷對(duì)象是否屬于繼承于當(dāng)前對(duì)象
// 如果為true，那就是返回的函數(shù)returnFn作為了一個(gè)構(gòu)造函數(shù)使用，那么this指向新實(shí)例，不再是context
// 如果為false，那就是返回的函數(shù)returnFn作為了一個(gè)普通函數(shù)使用，那么this指向context或者window
return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
};
// 這樣寫，使returnFn作為一個(gè)構(gòu)造函數(shù)使用的時(shí)候，那么通過(guò)原型繼承的方法，returnFn可以繼承當(dāng)前對(duì)象里面原型上面所有屬性和方法
// 修正prototype之后，創(chuàng)建的新實(shí)例，可以繼承原型的屬性和方法，例如例子，實(shí)例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里面的原型繼承相關(guān)知識(shí)點(diǎn)。
好了，我們已經(jīng)完成了90%了，但是還有點(diǎn)小瑕疵，關(guān)于原型繼承的，我們先來(lái)看看例子：
function fn() {}
Function.prototype.myBind = function(context) {
var context = context || window;
var self = this;
// myBind函數(shù)傳進(jìn)來(lái)的參數(shù)，從第2個(gè)開(kāi)始取
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 什么意思？這是一個(gè)判斷對(duì)象是否屬于繼承于當(dāng)前對(duì)象
// 如果 為true，那就是返回的函數(shù)returnFn作為了一個(gè)構(gòu)造函數(shù)使用，那么this指向新實(shí)例，不再是context
// 如果 為false，那就是返回的函數(shù)returnFn作為了一個(gè)普通函數(shù)使用，那么this指向context或者window
return self.apply(this instanceof returnFn ? this : context, arr.concat(args));
};
// 這樣寫，使returnFn作為一個(gè)構(gòu)造函數(shù)使用的時(shí)候，那么通過(guò)原型繼承的方法，returnFn可以繼承當(dāng)前對(duì)象里面原型上面所有屬性和方法
// 修正prototype之后，創(chuàng)建的新實(shí)例，可以繼承原型的屬性和方法，例如例子，實(shí)例newObj繼承了，this.phoneNumber中的屬性值。
returnFn.prototype = this.prototype;
return returnFn;
};
var getFn = fn.myBind(obj);
getFn.prototype.text = '我是被bind方法返回的函數(shù)'
console.log(fn.prototype.text) // '我是被bind方法返回的函數(shù)'，理論上這里不應(yīng)該被修改，應(yīng)該為undefined
由上述例子可以看出來(lái)，我們只是修改了通過(guò)用了bind方法返回函數(shù)的prototype對(duì)象添加了屬性，那么原函數(shù)的原型對(duì)象prototype也被修改了。這樣是不行的。所以我們繼續(xù)優(yōu)化了方法。
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函數(shù)傳進(jìn)來(lái)的參數(shù)，從第2個(gè)開(kāi)始取
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可以繼承原函數(shù)原型的屬性和方法
templateFn.prototype = this.prototype;
// 創(chuàng)建空函數(shù)實(shí)例，然后給returnFn的原型繼承，returnFn創(chuàng)建的實(shí)例可以繼承templateFn方法。
// 這樣修改了returnFn原型方法，都影響不了 原函數(shù)myBind原型對(duì)象，只會(huì)影響空函數(shù)templateFn。妙妙妙啊。
returnFn.prototype = new templateFn();
return returnFn;
};
var getFn = fn.myBind(obj);
var newObj = new getFn();
getFn.prototype.text = '我是被bind方法返回的函數(shù)'
console.log(fn.prototype.text) // => undefined
上述例子，可以看出來(lái)我們通過(guò)一個(gè)空函數(shù) var templateFn = function() {};，那么空函數(shù)templateFn的原型繼承原函數(shù)myBind的原型對(duì)象，再把返回函數(shù)returnFn繼承空函數(shù)templateFn的實(shí)例屬性和方法。這樣子改變返回函數(shù)templateFn的原型對(duì)象，不再影響原函數(shù)了myBind原型對(duì)象，簡(jiǎn)直一個(gè)妙字。
防止調(diào)用不是函數(shù)情況
if (typeof this !== 'function') {
throw new Error('The bind method is not available');
}
三者都可以改變函數(shù)的this對(duì)象指向。
三者第一個(gè)參數(shù)都是this要指向的對(duì)象，如果沒(méi)有這個(gè)參數(shù)或參數(shù)為undefined或null，則默認(rèn)指向全局window。
三者都可以傳參，但是apply是數(shù)組，而call是參數(shù)列表，且apply和call是一次性傳入?yún)?shù)，而bind可以分為多次傳入，bind是返回綁定this之后的函數(shù)，apply、call 則是立即執(zhí)行。
希望看完這篇文章對(duì)你有幫助：
文中如有錯(cuò)誤，歡迎在評(píng)論區(qū)指正，如果這篇文章幫助到了你，歡迎點(diǎn)贊和關(guān)注，后續(xù)會(huì)輸出更好的分享。
歡迎關(guān)注公眾號(hào)：【程序員米粉】
公眾號(hào)分享開(kāi)發(fā)編程、職場(chǎng)晉升、大廠面試經(jīng)驗(yàn)
