js bind 函數(shù) 使用閉包保存執(zhí)行上下文

更新時(shí)間：2011年12月26日 23:17:33 作者：

在javascript中，函數(shù)總是在一個(gè)特殊的上下文執(zhí)行（稱為執(zhí)行上下文），如果你將一個(gè)對(duì)象的函數(shù)賦值給另外一個(gè)變量的話，這個(gè)函數(shù)的執(zhí)行上下文就變?yōu)檫@個(gè)變量的上下文了。下面的一個(gè)例子能很好的說(shuō)明這個(gè)問(wèn)題

復(fù)制代碼代碼如下:

 
window.name = "the window object" 
function scopeTest() { 
return this.name; 
} 
// calling the function in global scope: 
scopeTest() 
// -> "the window object" 
var foo = { 
name: "the foo object!", 
otherScopeTest: function() { return this.name } 
}; 
foo.otherScopeTest();// -> "the foo object!" 
var foo_otherScopeTest = foo.otherScopeTest; 
foo_otherScopeTest(); 
// –> "the window object" 

如果你希望將一個(gè)對(duì)象的函數(shù)賦值給另外一個(gè)變量后，這個(gè)函數(shù)的執(zhí)行上下文仍然為這個(gè)對(duì)象，那么就需要用到bind方法。
bind的實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

 
// The .bind method from Prototype.js 
Function.prototype.bind = function(){ 
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); 
return function(){ 
return fn.apply(object, 
args.concat(Array.prototype.slice.call(arguments))); 
}; 
}; 

使用示例：

復(fù)制代碼代碼如下:

 
var obj = { 
name: 'A nice demo', 
fx: function() { 
alert(this.name); 
} 
}; 
window.name = 'I am such a beautiful window!'; 
function runFx(f) { 
f(); 
} 
var fx2 = obj.fx.bind(obj); 
runFx(obj.fx); 
runFx(fx2); 

參考：
http://www.prototypejs.org/api/function/bind
PS：
才發(fā)現(xiàn)prototypejs的API文檔解釋的這么詳細(xì)，一定要花點(diǎn)時(shí)間多看看了。
我的簡(jiǎn)單的實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

 
Function.prototype.bind = function(obj) { 
var _this = this; 
return function() { 
return _this.apply(obj, 
Array.prototype.slice.call(arguments)); 
} 
} 
var name = 'window', 
foo = { 
name:'foo object', 
show:function() { 
return this.name; 
} 
}; 
console.assert(foo.show()=='foo object', 
'expected foo object,actual is '+foo.show()); 
var foo_show = foo.show; 
console.assert(foo_show()=='window', 
'expected is window,actual is '+foo_show()); 
var foo_show_bind = foo.show.bind(foo); 
console.assert(foo_show_bind()=='foo object', 
'expected is foo object,actual is '+foo_show_bind()); 

您可能感興趣的文章:

相關(guān)文章

前端無(wú)感知刷新token以及超時(shí)自動(dòng)退出實(shí)現(xiàn)方案
前端需要做到無(wú)感刷新token,即刷token時(shí)要做到用戶無(wú)感知,避免頻繁登錄,下面這篇文章主要給大家介紹了關(guān)于前端無(wú)感知刷新token以及超時(shí)自動(dòng)退出的實(shí)現(xiàn)方案,需要的朋友可以參考下
2024-01-01
微信小程序使用ECharts的示例詳解
echarts-for-weixin是ECharts官方維護(hù)的一個(gè)開(kāi)源項(xiàng)目，提供了一個(gè)微信小程序組件，可以通過(guò)這個(gè)組件在微信小程序中使用?ECharts?繪制圖表。本文將通過(guò)示例詳解微信小程序使用ECharts的方法，感興趣的可以了解一下
2022-06-06
微信小程序控制view隱藏顯示的5種方法匯總
在微信小程序開(kāi)發(fā)時(shí),經(jīng)常要用到一個(gè)控件會(huì)根據(jù)不同的情況和環(huán)境動(dòng)態(tài)顯示與隱藏這種情況,下面這篇文章主要給大家介紹了關(guān)于微信小程序控制view隱藏顯示的5種方法,需要的朋友可以參考下
2022-04-04
為javascript添加String.Format方法
每次在javascript中用加號(hào)合成字符串，真的沒(méi)法忍受了，今天終于找到一高手寫的方法，與大家分享。
2009-11-11
js去空格技巧分別去字符串前后、左右空格
js去空格想必大家多少都會(huì)點(diǎn)吧，在接下來(lái)的文章中為大家詳細(xì)介紹下如何分別去字符串前后，左邊，右邊空格，感興趣的朋友可以參考下
2013-10-10
JavaScrip String對(duì)象的方法
這篇文章主要為大家介紹了String對(duì)象的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
JS獲取指定時(shí)間的時(shí)間戳的方法匯總(最新整理收藏版)
在JavaScript中,可以使用Date.parse()或new Date()來(lái)獲取指定時(shí)間的時(shí)間戳,本文給大家分享JS獲取指定時(shí)間的時(shí)間戳的方法,感興趣的朋友一起看看吧
2024-01-01
js精美的幻燈片畫(huà)集特效代碼分享
這篇文章主要介紹了js制作精美的幻燈片畫(huà)集特效，視覺(jué)上特別有沖擊感，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
詳解js中call與apply關(guān)鍵字的作用
本文主要介紹js中call與apply關(guān)鍵字的作用以及它們的用法,具體實(shí)例如下,希望對(duì)大家有所幫助
2016-11-11
jsonp跨域及實(shí)現(xiàn)百度首頁(yè)聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實(shí)現(xiàn)百度首頁(yè)聯(lián)想功能的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08