經(jīng)常會看到網(wǎng)上各種手寫bind的教程，下面是我在自己實現(xiàn)手寫bind的過程中遇到的問題與思考。如果對于如何實現(xiàn)一個手寫bind還有疑惑的話，那么可以先看看上面兩篇文章。

手寫bind vs 原生bind

我們先使用一個典型的手寫bind的例子，代碼如下：

Function.prototype.bind2 = function (context) {
    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

我們首先用原生bind運行一下代碼

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function( ) {}
let _Foo = Foo.bind(undefined, 'a')
new _Foo() 

更多面試題解答參見前端手寫面試題詳細解答

然后使用手寫版代碼，運行同樣的代碼

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function( ) {}
let _Foo = Foo.bind2(undefined, 'a')
new _Foo() 

我們可以看到相比原生bind方法，手寫版的bind方法返回的構造函數(shù)，構造出來的新對象會比原生的多一層__proto__。而這個__proto__產(chǎn)生的原因就是在很多教程中提到的防止原型鏈篡改。

這也就是為什么很多的文章會告訴你，為什么要添加下面的代碼。

var fNOP = function () {};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();

這段代碼中，使用了一個空函數(shù)作為中轉，相當于Object.create(fBound.prototype)。具體可以查看文章開頭給出的文章，里面的詳細的說明。

規(guī)范中的bind

既然說道，加上面的代碼是為了防止原型鏈篡改。我就想看看原生的bind如何處理這個問題的呢？

function Foo(a) {this.a = a}
Foo.prototype.sayHi = function( ) {}
let _Foo = Foo.bind(undefined, 'a')
_Foo.prototype.sayHi = function( ) {console.log('篡改的_Foo的sayHi方法')}
(new _Foo().sayHi())

我發(fā)現(xiàn)在運行上面的代碼，程序執(zhí)行到修改_Foo的原型方法的語句時，就已經(jīng)報錯了。提示表明_Foo沒有prototype屬性！既然沒有prototype屬性，那么是不是也就不用處理原型鏈篡改的問題了呢？

之后，我查了一下規(guī)范, 在NOTE中，有下面一段話。明確指出了bind返回的函數(shù)是沒有prototype屬性，這也多少印證了上面的猜想。

Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties.

其中需要注意的有一點是這條：

Set the [[Prototype]] internal property of F to the standard built-in Function prototype object as specified in 15.3.3.1.

我自己理解的意思是是bind出來的函數(shù)對象的prototype屬性是內(nèi)建的Function.prototype屬性, 這里應該是說明了為什么原生的bind不會多一層__proto__屬性

小結

寫這篇的目的是總結下自己在實現(xiàn)bind過程中遇到的問題，記錄探究的過程。通過一系列手寫原生方法，鍛煉了我們對于原理的進一步認識。但是也要注意驗證，實際去操作幾次，可能得出自己的經(jīng)驗。如果有更多的兩者對比的發(fā)現(xiàn)，可以在評論里告訴我，歡迎各位大佬斧正。

到此這篇關于JavaScript bind函數(shù)手寫教程的文章就介紹到這了,更多相關JS bind函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論