理解javascript中的Function.prototype.bind的方法
在初學Javascript時,我們也許不需要擔心函數(shù)綁定的問題,但是當我們需要在另一個函數(shù)中保持上下文對象this時,就會遇到相應的問題了,我見過很多人處理這種問題都是先將this賦值給一個變量(比如self、_this、that等),尤其是var that = this是我見的最多的,這樣當你改變環(huán)境之后就可以使用它。這些都是可以的,但是還有一種更好的、更專有的方法,那就是使用Function.prototype.bind,下面進行詳盡的講解?! ?/p>
第一部分:需要解決的問題
首先看下面的代碼
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í)行;最后一個方法會調用myObj對象的getAsyncData方法,這里使用了this,然后在getAsyncData方法中傳入了一個函數(shù),這個函數(shù)繼續(xù)調用這個對象的前兩個方法,仍使用了this,這時很多人實際上就可以看出問題所在了,將上述代碼輸入控制臺,得到下面的結果:
TypeError: this.specialFunction is not a function
第二部分:問題剖析
在對象中render方法中的this的確是指向myObj對象的,所以我們可以通過this.getAsyncData來調用這個對象中的函數(shù),但是當我們給其傳遞函數(shù)作為參數(shù)時,這里的this就指向了全局環(huán)境window了,因為全局環(huán)境中沒有對象中的前兩個方法,所以才會報錯。
第三部分:解決問題的幾種方式
所以我們需要做的就是正確調用對象中的前兩個方法 ,很多人使用的方法便是首先在對象的環(huán)境中獲取this賦值給另一個變量,這時就可以在后面的環(huán)境中調用了,如下所示:
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(); // undefined
var boundFunc = bar.bind(foo);
boundFunc(); // 3
下面的例子也是常見的:
this.x = 9; // this refers to global "window" object here in the browser
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var 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 x
var 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;
};
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
原生Js實現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
大家經??吹骄W(wǎng)頁里圖片漸變顯示,自己寫一個。原理很簡單就是修改元素的css透明度,具體實現(xiàn)代碼如下,感興趣的各位可以參考下哈,希望對大家有所幫助2013-06-06
微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關屬性設置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的,下面這篇文章主要給大家介紹了關于如何利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關資料,需要的朋友可以參考下2021-07-07
在ES5與ES6環(huán)境下處理函數(shù)默認參數(shù)的實現(xiàn)方法
本文給大家介紹在ES5與ES6環(huán)境下處理函數(shù)默認參數(shù)的實現(xiàn)方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
JavaScript基于libgif.js實現(xiàn)控制gif動畫幀
這篇文章主要為大家詳細介紹了JavaScript如何利用libgif.js插件控制gif動畫幀,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02

