ECMAScript5(ES5)中bind方法使用小結(jié)
更新時(shí)間：2015年05月07日 08:58:52 投稿：junjie
這篇文章主要介紹了ECMAScript5(ES5)中bind方法使用小結(jié),bind和call以及apply一樣,都是可以改變上下文的this指向的,需要的朋友可以參考下
一直以來對(duì)和this有關(guān)的東西模糊不清，譬如call、apply等等。這次看到一個(gè)和bind有關(guān)的筆試題，故記此文以備忘。
bind和call以及apply一樣，都是可以改變上下文的this指向的。不同的是，call和apply一樣，直接引用在方法上，而bind綁定this后返回一個(gè)方法，但內(nèi)部核心還是apply。
直接看例子：
復(fù)制代碼 代碼如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
window.a = window.b = 0;
console.log(obj.getCount(3, 4)); // 10
var func = obj.getCount;
console.log(func(3, 4)); // 7
為何會(huì)這樣？因?yàn)閒unc在上下文中的this是window！bind的存在正是為了改變this指向獲取想要的值：
復(fù)制代碼 代碼如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10
bind是function的一個(gè)函數(shù)擴(kuò)展方法，bind以后代碼重新綁定了func內(nèi)部的this指向（obj），但是不兼容ie6~8，兼容代碼如下：
復(fù)制代碼 代碼如下:
var obj = {
a: 1,
b: 2,
getCount: function(c, d) {
return this.a + this.b + c + d;
}
};
Function.prototype.bind = Function.prototype.bind || function(context) {
var that = this;
return function() {
// console.log(arguments); // console [3,4] if ie<6-8>
return that.apply(context, arguments);
}
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10
其實(shí)在我看來bind的核心是返回一個(gè)未執(zhí)行的方法，如果直接使用apply或者call：
復(fù)制代碼 代碼如下:
var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10
無法使用簡(jiǎn)寫的func函數(shù)構(gòu)造，所以用bind傳遞this指向，再返回一個(gè)未執(zhí)行的方法，實(shí)現(xiàn)方式相當(dāng)巧妙。
您可能感興趣的文章:
相關(guān)文章
THREE.JS入門教程(5)你應(yīng)當(dāng)知道的十件事
Three.js是一個(gè)偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D，本文會(huì)讓你了解一下使用THREE.JS處理3D/避免SetInterval/使用倒序循環(huán)等等，感興趣的朋友可以了解下哦2013-01-01
下面小編就為大家?guī)硪黄猨avascript的幾種繼承方法介紹。小編覺得挺不錯(cuò)的?，F(xiàn)在分享給大家，給大家一個(gè)參考2016-03-03
作為開發(fā)人員，Web頁面加載或刷新的速度對(duì)其網(wǎng)站至關(guān)重要。開發(fā)人員在各種瀏覽器中調(diào)試JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以使用Firebug調(diào)試JavaScript，但仍然不能調(diào)整很多性能問題，如瀏覽器呈現(xiàn)消耗時(shí)間。2014-11-11
這篇文章主要介紹了JavaScript之?dāng)?shù)組扁平化詳解的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
addEventListener和attachEvent二者綁定的執(zhí)行函數(shù)中的this不相同
寫 addEventListener 和 attachEvent 區(qū)別的博文不少，不過大部分都把重點(diǎn)放置于前者是Firefox chrome，后者只是存在于IE系列中2012-12-12
javascript instanceof 與typeof使用說明
instanceof和typeof都能用來判斷一個(gè)變量是否為空或是什么類型的變量。2010-01-01
JavaScript中數(shù)組繼承的簡(jiǎn)單示例
這篇文章主要介紹了JavaScript中數(shù)組繼承的簡(jiǎn)單示例,數(shù)組繼承是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
Javascript腳本中，引用的參數(shù)內(nèi)部可以修改，但參數(shù)對(duì)應(yīng)的引用不能修改，下面為大家詳細(xì)介紹下2014-02-02
用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互
這篇文章主要給大家介紹了關(guān)于用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互的相關(guān)資料,需要的朋友可以參考下2006-12-12
三張圖帶你搞懂JavaScript的原型對(duì)象與原型鏈
這篇文章介紹了JavaScript的原型對(duì)象與原型鏈，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07