資訊專欄INFORMATION COLUMN
摘要：被調(diào)用時(shí)，等參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。它返回由指定的值和初始化參數(shù)改造的原函數(shù)拷貝。一個(gè)綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。其實(shí)這個(gè)思路也是庫(kù)如何實(shí)現(xiàn)繼承的方法。他的函數(shù)如下最后一步是將的指回。
update: 2018-06-08
原文鏈接
為什么要自己去實(shí)現(xiàn)一個(gè)bind函數(shù)？
bind()函數(shù)在 ECMA-262 第五版才被加入；它可能無(wú)法在所有瀏覽器上運(yùn)行。
所以，為了理想主義和世界和平（所有瀏覽器上都能隨心所欲調(diào)用它），必要的時(shí)候需要我們自己去實(shí)現(xiàn)一個(gè)bind。那么，一個(gè)bind函數(shù)需要具備什么功能呢？
bind函數(shù)的核心作用：綁定this、初始化參數(shù)綁定this、定義初始化參數(shù)是它存在的主要意義和價(jià)值。MDN對(duì)它的定義如下：
語(yǔ)法：fun.bind(thisArg[, arg1[, arg2[, ...]]])bind()方法創(chuàng)建一個(gè)新的函數(shù), 當(dāng)被調(diào)用時(shí)，將其this關(guān)鍵字設(shè)置為提供的值（thisArg）。
被調(diào)用時(shí)，arg1、arg2等參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。
它返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。
鑒于這兩個(gè)核心作用，我們可以來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單版看看：
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
return
}
let self = this
let args = Array.prototype.slice.call(arguments, 1)
return function () {
return self.apply(oThis, args.concat(Array.prototype.slice.call(arguments))) //這里的arguments是執(zhí)行綁定函數(shù)時(shí)的實(shí)參
}
}
}
由于arguments是類數(shù)組對(duì)象，不擁有數(shù)組的slice方法，所以需要通過(guò)call來(lái)將slice的this指向arguments。args就是調(diào)用bind時(shí)傳入的初始化參數(shù)（剔除了第一個(gè)參數(shù)oThis）。將args與綁定函數(shù)執(zhí)行時(shí)的實(shí)參arguments通過(guò)concat連起來(lái)作為參數(shù)傳入，就實(shí)現(xiàn)了bind函數(shù)初始化參數(shù)的效果。
bind函數(shù)的另外一個(gè)也是最主要的作用：綁定this指向，就是通過(guò)將調(diào)用bind時(shí)的this（self）指向指定的oThis來(lái)完成。這樣當(dāng)我們要使用bind綁定某個(gè)對(duì)象時(shí)，執(zhí)行綁定函數(shù)，它的this就永遠(yuǎn)固定為指定的對(duì)象了～
遇到new操作符的時(shí)候呢到這里，我們已經(jīng)可以用上面的版本來(lái)使用大部分場(chǎng)景了。但是～
但是，這種方案就像前面說(shuō)的，它會(huì)永遠(yuǎn)地為綁定函數(shù)固定this為指定的對(duì)象。如果你仔細(xì)看過(guò)MDN關(guān)于bind的描述，你會(huì)發(fā)現(xiàn)還有一個(gè)情況除外：
thisArg：當(dāng)使用new 操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。
我們可以通過(guò)一個(gè)示例來(lái)試試看原生的bind對(duì)于使用new的情況是如何的：
function animal(name) {
this.name = name
}
let obj = {}
let cat = animal.bind(obj)
cat("lily")
console.log(obj.name) //lily
let tom = new cat("tom")
console.log(obj.name) //lily
console.log(tom.name) //tom
試驗(yàn)結(jié)果發(fā)現(xiàn)，obj.name依然是lily而沒(méi)有變成tom，所以就像MDN描述的那樣，如果綁定函數(shù)cat是通過(guò)new操作符來(lái)創(chuàng)建實(shí)例對(duì)象的話，this會(huì)指向創(chuàng)建的新對(duì)象tom，而不再固定綁定指定的對(duì)象obj。
而上面的簡(jiǎn)易版卻沒(méi)有這樣的能力，它能做到的只是永久地綁定指定的this（有興趣的胖友可以在控制臺(tái)使用簡(jiǎn)易版bind試下這個(gè)例子看看結(jié)果）。這顯然不能很好地替代原生的bind函數(shù)～
那么，如何才能區(qū)分綁定函數(shù)有沒(méi)有通過(guò)new操作符來(lái)創(chuàng)建一個(gè)實(shí)例對(duì)象，從而進(jìn)行分類處理呢？
區(qū)分綁定函數(shù)是否使用new，分類處理我們知道檢測(cè)一個(gè)對(duì)象是否通過(guò)某個(gè)構(gòu)造函數(shù)使用new實(shí)例化出來(lái)的最快的方式是通過(guò) instanceof：
A instanceof B //驗(yàn)證A是否為B的實(shí)例
那么，我們就可以這樣來(lái)實(shí)現(xiàn)這個(gè)bind：
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
return
}
let self = this
let args = Array.prototype.slice.call(arguments, 1)
let fBound = function() {
let _this = this instanceof self ? this : oThis //檢測(cè)是否使用new創(chuàng)建
return self.apply(_this, args.concat(Array.prototype.slice.call(arguments)))
}
if (this.prototype) {
fBound.prototype = this.prototype
}
return fBound
}
}
假設(shè)我們將調(diào)用bind的函數(shù)稱為C，將fBound的prototype原型對(duì)象指向C的prototype原型對(duì)象（上例中就是self），這樣的話如果將fBound作為構(gòu)造函數(shù)（使用new操作符）實(shí)例化一個(gè)對(duì)象，那么這個(gè)對(duì)象也是C的實(shí)例，this instanceof self就會(huì)返回true。這時(shí)就將self指向新創(chuàng)建的對(duì)象的this上就可以達(dá)到原生bind的效果了（不再固定指定的this）。否則，才使用oThis，即綁定指定的this。
但是這樣做會(huì)有什么影響？將fBound的prototype原型對(duì)象直接指向self的prototype原型對(duì)象，那么當(dāng)修改fBound的prototype對(duì)象時(shí)，self（上述C函數(shù)）的prototype對(duì)象也會(huì)被修改?。?/strong>考慮到這個(gè)問(wèn)題，我們需要另外一個(gè)function來(lái)幫我們做個(gè)中間人來(lái)避免這個(gè)問(wèn)題，我們看看MDN是怎么實(shí)現(xiàn)bind的。
MDN提供的Polyfill方案 及 YUI庫(kù)extend函數(shù)實(shí)現(xiàn)MDN針對(duì)bind沒(méi)有被廣泛支持的兼容性提供了一個(gè)實(shí)現(xiàn)方案：
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),//這里的arguments是跟oThis一起傳進(jìn)來(lái)的實(shí)參
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP
? this
: oThis,
// 獲取調(diào)用時(shí)(fBound)的傳參.bind 返回的函數(shù)入?yún)⑼沁@么傳遞的
aArgs.concat(Array.prototype.slice.call(arguments)));
};
// 維護(hù)原型關(guān)系
if (this.prototype) {
// Function.prototype doesn"t have a prototype property
fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP();
return fBound;
};
}
發(fā)現(xiàn)了嗎，和上面經(jīng)過(guò)改造的方案相比，最主要的差異就在于它定義了一個(gè)空的function fNOP，通過(guò)fNOP來(lái)傳遞原型對(duì)象給fBound（通過(guò)實(shí)例化的方式）。這時(shí)，修改fBound的prototype對(duì)象，就不會(huì)影響到self的prototype對(duì)象啦～而且fNOP是空對(duì)象，所以幾乎不占內(nèi)存。
其實(shí)這個(gè)思路也是YUI庫(kù)如何實(shí)現(xiàn)繼承的方法。他的extend函數(shù)如下：
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
最后一步是將Child的constructor指回Child。
總結(jié)實(shí)現(xiàn)一個(gè)原生的函數(shù)，最重要的是理清楚它的作用和功能，然后逐一去實(shí)現(xiàn)它們包括細(xì)節(jié)，基本上就不會(huì)有問(wèn)題～
這里用到的一些關(guān)于prototype和instanceof的具體含義，可以參考阮一峰老師的 prototype 對(duì)象，相信對(duì)你理解JavaScript的原型鏈和繼承會(huì)有幫助～
好啦就這樣，晚安好夢(mèng)了各位
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107995.html
摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來(lái)考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來(lái)解答。社區(qū)上關(guān)于原生bind的研...
摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來(lái)考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來(lái)解答。社區(qū)上關(guān)于原生bind的研...
摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來(lái)考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來(lái)解答。社區(qū)上關(guān)于原生bind的研...
摘要：昨天被人問(wèn)到的的作用是什么這個(gè)倒還能回答出來(lái)，之后返回一個(gè)新的函數(shù)，這個(gè)函數(shù)可以保持傳遞的上下文。沒(méi)有完全實(shí)現(xiàn)規(guī)定的。比如規(guī)定了的和行為。 https://friskfly.github.io/2016/03/24/about-function-bind-in-js/ 昨天被人問(wèn)到j(luò)s的bind的作用是什么？ 這個(gè)倒還能回答出來(lái)，bind 之后返回一個(gè)新的函數(shù)，這個(gè)函數(shù)可以保持傳遞的t...
摘要：每次被執(zhí)行時(shí)，和被傳入，這個(gè)根據(jù)進(jìn)行累加或者是自身消減，英文原意，進(jìn)而返回最新的。 之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進(jìn)階Pollyfill，今天再分享一個(gè)有意思的題目。 從解這道題目出發(fā)，我會(huì)談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩(shī)人章碣《對(duì)月》詩(shī)中所云：別有洞天三十六，水...
閱讀 1450·2023-04-25 15:21
閱讀 2764·2021-11-24 10:23
閱讀 3463·2021-10-11 10:59
閱讀 3345·2021-09-03 10:28
閱讀 1790·2019-08-26 13:45
閱讀 2389·2019-08-26 12:11
閱讀 989·2019-08-26 12:00
閱讀 1775·2019-08-26 10:44
