ECMAScript5(ES5)中bind方法使用小結(jié)
更新時(shí)間：2015年05月07日 08:58:52 投稿：junjie
這篇文章主要介紹了ECMAScript5(ES5)中bind方法使用小結(jié),bind和call以及apply一樣,都是可以改變上下文的this指向的,需要的朋友可以參考下
一直以來對和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
為何會這樣？因?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
無法使用簡寫的func函數(shù)構(gòu)造，所以用bind傳遞this指向，再返回一個(gè)未執(zhí)行的方法，實(shí)現(xiàn)方式相當(dāng)巧妙。
相關(guān)文章
JavaScript實(shí)現(xiàn)cookie的操作
這篇文章介紹了JavaScript操作Cookie的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
下面小編就為大家?guī)硪黄獪\談Web頁面向后臺提交數(shù)據(jù)的方式和選擇。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
使用Java實(shí)現(xiàn)簡單的server/client回顯功能的方法介紹
本篇文章介紹了，使用Java實(shí)現(xiàn)簡單的server/client回顯功能的方法。需要的朋友參考下2013-05-05
本文給大家詳細(xì)介紹了JavaScript正則表達(dá)式的分組匹配的概念以及具體的使用方法并附上了相關(guān)示例，有需要的小伙伴可以參考下。2016-02-02
JS排序方法（sort，bubble，select，insert）代碼匯總
新技術(shù)一直在不斷變化，掌握一些基礎(chǔ)是未來學(xué)習(xí)不斷更新的技術(shù)的堅(jiān)實(shí)基礎(chǔ)。近來閑來無事,為了溫習(xí)一下從前學(xué)的數(shù)據(jù)結(jié)構(gòu)，將數(shù)據(jù)結(jié)構(gòu)中的排序算法用JS實(shí)現(xiàn)了一遍，2016-01-01
關(guān)于uni-app頁面Page和組件Component生命周期執(zhí)行的先后順序
這篇文章主要介紹了關(guān)于uni-app頁面Page和組件Component生命周期執(zhí)行的先后順序,文中提供了具體的代碼,還不清楚的朋友可以來學(xué)習(xí)一下2023-04-04
ES6標(biāo)準(zhǔn)出爐之前，一個(gè)幽靈，回調(diào)的幽靈，游蕩在JavaScript世界。正所謂世界本沒有回調(diào)，寫的人多了也就有了。接下來就來簡單介紹Javascript ES6中的原生Promise，有需要的可以參考借鑒。2016-08-08
Javascript的時(shí)間戳和php的時(shí)間戳轉(zhuǎn)換注意事項(xiàng)
需要注意的是js的時(shí)間戳是13位，php的時(shí)間戳是10位,轉(zhuǎn)換函數(shù)如下，感興趣的朋友可以參考下哈2013-04-04
JavaScript中使用指數(shù)方法Math.exp()的簡介
這篇文章主要介紹了JavaScript中使用指數(shù)方法Math.exp(),是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
Javascript學(xué)習(xí)筆記8 用JSON做原型
在Javascript學(xué)習(xí)筆記5 類和對象中，我簡單地提到了利用JSON去構(gòu)造一個(gè)對象。2010-01-01