在初學(xué)Javascript時(shí)，我們也許不需要擔(dān)心函數(shù)綁定的問題，但是當(dāng)我們需要在另一個(gè)函數(shù)中保持上下文對(duì)象this時(shí)，就會(huì)遇到相應(yīng)的問題了，我見過很多人處理這種問題都是先將this賦值給一個(gè)變量（比如self、_this、that等），尤其是var that = this是我見的最多的，這樣當(dāng)你改變環(huán)境之后就可以使用它。這些都是可以的，但是還有一種更好的、更專有的方法，那就是使用Function.prototype.bind，下面進(jìn)行詳盡的講解。
第一部分：需要解決的問題
首先看下面的代碼
var myObj = { specialFunction: function () { }, anotherSpecialFunction: function () { }, getAsyncData: function (cb) { cb(); }, render: function () {this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }); }};myObj.render();這里我希望創(chuàng)建一個(gè)對(duì)象，包含了前面兩個(gè)普通的方法；第三個(gè)方法可以傳遞一個(gè)函數(shù)，傳入的這個(gè)函數(shù)立即執(zhí)行；最后一個(gè)方法會(huì)調(diào)用myObj對(duì)象的getAsyncData方法，這里使用了this，然后在getAsyncData方法中傳入了一個(gè)函數(shù)，這個(gè)函數(shù)繼續(xù)調(diào)用這個(gè)對(duì)象的前兩個(gè)方法，仍使用了this，這時(shí)很多人實(shí)際上就可以看出問題所在了，將上述代碼輸入控制臺(tái)，得到下面的結(jié)果：
TypeError: this.specialFunction is not a function
第二部分：?jiǎn)栴}剖析
在對(duì)象中render方法中的this的確是指向myObj對(duì)象的，所以我們可以通過this.getAsyncData來(lái)調(diào)用這個(gè)對(duì)象中的函數(shù)，但是當(dāng)我們給其傳遞函數(shù)作為參數(shù)時(shí)，這里的this就指向了全局環(huán)境window了，因?yàn)槿汁h(huán)境中沒有對(duì)象中的前兩個(gè)方法，所以才會(huì)報(bào)錯(cuò)。
第三部分：解決問題的幾種方式
所以我們需要做的就是正確調(diào)用對(duì)象中的前兩個(gè)方法 ，很多人使用的方法便是首先在對(duì)象的環(huán)境中獲取this賦值給另一個(gè)變量，這時(shí)就可以在后面的環(huán)境中調(diào)用了，如下所示：
render: function () { var that = this; this.getAsyncData(function () { that.specialFunction(); that.anotherSpecialFunction(); }); } 雖然這種方法是可行的，但是使用Function.prototype.bind()會(huì)使代碼更清晰、易懂，如下所示：
render: function () { this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }.bind(this));}這里我們就成功地把this綁定到了環(huán)境中。
下面是另外一個(gè)簡(jiǎ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第四部分：瀏覽器支持
但是這個(gè)方法在IE8及以下是不被支持的，所以我們可以使用MDN提供的方法來(lái)使得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; };}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
