在初學(xué)Javascript時，我們也許不需要擔(dān)心函數(shù)綁定的問題，但是當(dāng)我們需要在另一個函數(shù)中保持上下文對象this時，就會遇到相應(yīng)的問題了，我見過很多人處理這種問題都是先將this賦值給一個變量（比如self、_this、that等），尤其是var that = this是我見的最多的，這樣當(dāng)你改變環(huán)境之后就可以使用它。這些都是可以的，但是還有一種更好的、更專有的方法，那就是使用Function.prototype.bind，下面進行詳盡的講解。
第一部分：需要解決的問題
首先看下面的代碼
var myObj = { specialFunction: function () { }, anotherSpecialFunction: function () { }, getAsyncData: function (cb) { cb(); }, render: function () {this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }); }};myObj.render();這里我希望創(chuàng)建一個對象，包含了前面兩個普通的方法；第三個方法可以傳遞一個函數(shù)，傳入的這個函數(shù)立即執(zhí)行；最后一個方法會調(diào)用myObj對象的getAsyncData方法，這里使用了this，然后在getAsyncData方法中傳入了一個函數(shù)，這個函數(shù)繼續(xù)調(diào)用這個對象的前兩個方法，仍使用了this，這時很多人實際上就可以看出問題所在了，將上述代碼輸入控制臺，得到下面的結(jié)果：
TypeError: this.specialFunction is not a function
第二部分：問題剖析
在對象中render方法中的this的確是指向myObj對象的，所以我們可以通過this.getAsyncData來調(diào)用這個對象中的函數(shù)，但是當(dāng)我們給其傳遞函數(shù)作為參數(shù)時，這里的this就指向了全局環(huán)境window了，因為全局環(huán)境中沒有對象中的前兩個方法，所以才會報錯。
第三部分：解決問題的幾種方式
所以我們需要做的就是正確調(diào)用對象中的前兩個方法 ，很多人使用的方法便是首先在對象的環(huán)境中獲取this賦值給另一個變量，這時就可以在后面的環(huán)境中調(diào)用了，如下所示：
render: function () { var that = this; this.getAsyncData(function () { that.specialFunction(); that.anotherSpecialFunction(); }); } 雖然這種方法是可行的，但是使用Function.prototype.bind()會使代碼更清晰、易懂，如下所示：
render: function () { this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }.bind(this));}這里我們就成功地把this綁定到了環(huán)境中。
下面是另外一個簡單的例子：
var foo = { x: 3}var bar = function(){ console.log(this.x);}bar(); // undefinedvar boundFunc = bar.bind(foo);boundFunc(); // 3下面的例子也是常見的：
this.x = 9; // this refers to global "window" object here in the browservar module = { x: 81, getX: function() { return this.x; }};module.getX(); // 81var retrieveX = module.getX;retrieveX(); // returns 9 - The function gets invoked at the global scope// Create a new function with 'this' bound to module// New programmers might confuse the// global var x with module's property xvar boundGetX = retrieveX.bind(module);boundGetX(); // 81第四部分：瀏覽器支持
但是這個方法在IE8及以下是不被支持的，所以我們可以使用MDN提供的方法來使得IE低版本支持.bind()方法：
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), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; };}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
