您好,登錄后才能下訂單哦!
javascript中Function.prototype.bind方法的作用是什么?針對這個問題,這篇文章詳細介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
第一部分:需要解決的問題
首先看下面的代碼
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ù),但是當我們給其傳遞函數(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(); // 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; }; }
關(guān)于javascript中Function.prototype.bind方法的作用是什么問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。