javascript中bind函數(shù)的作用實例介紹

更新時間：2014年09月28日 17:45:32 投稿：whsnow

bind()的方法在ie,6,7,8中不適用，需要擴展通過擴展Function prototype可以實現(xiàn)此方法，下面為大家介紹下javascript中bind函數(shù)的作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按鈕 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 彈出button
};
//可以看出上下文的this 為button
</script>
</body>
</html>

此時加入bind

復制代碼代碼如下:

 var text = document.getElementById("text");

 var button = document.getElementById("button");

 button.onclick = function() {

 alert(this.id); // 彈出button

 }.bind(text);

 //可以看出上下文的this 為button

此時會發(fā)現(xiàn)this改變?yōu)閠ext

函數(shù)字面量里也適用，目的是保持上下指向（this)不變。

var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

此時點擊按鈕text里的字會變色?？梢妕his不為button而是obj。

bind()的方法在ie,6,7,8中不適用，需要擴展通過擴展Function prototype可以實現(xiàn)此方法。

if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

此時可以看到ie6,7,8中也支持bind()。

復制代碼代碼如下:

slice = Array.prototype.slice,

或

array = Array.prototype.slice.call( array, 0 );

將類似數(shù)組轉(zhuǎn)換為數(shù)組

您可能感興趣的文章:

bind

javascript中的隱式調(diào)用
本篇文章給大家詳細介紹了javascript中的隱式調(diào)用相關知識點，對此有興趣的可以跟著小編一起學習下。
2018-02-02
詳解JavaScript中Canvas的高級繪圖和動畫技術
JavaScript中的Canvas 是一個強大的 HTML5 元素,允許你通過編程方式創(chuàng)建圖形、繪制圖像和實現(xiàn)復雜的動畫效果,在本文中,我們將深入探討 JavaScript Canvas 的高級繪圖和動畫技術,并提供一個復雜的案例,以展示其潛力,需要的朋友可以參考下
2023-10-10
js阻止事件追加的具體實現(xiàn)
可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和默認事件的執(zhí)行。但不能阻止事件的追加，如要追加，請看下面的實現(xiàn)方法
2014-10-10
微信小程序高德地圖路線規(guī)劃實現(xiàn)過程詳解
這篇文章主要介紹了微信小程序路線規(guī)劃實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
JavaScript 上傳文件限制參數(shù)案例詳解
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下
2024-02-02
小程序中手機號識別的示例
這篇文章主要介紹了小程序中手機號識別的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
Echarts圖表分析巴西隊歷年戰(zhàn)績實例詳解
這篇文章主要為大家介紹了Echarts圖表分析巴西隊歷年戰(zhàn)績實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度
在前端開發(fā)中,使用百度地圖 API 來獲取用戶的經(jīng)緯度是一種常見需求,本文提供了使用原生 JavaScript 和 Vue.js 實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細示例,需要的可以了解下
2024-11-11
js實現(xiàn)驗證碼干擾（靜態(tài)）
這篇文章主要為大家詳細介紹了js實現(xiàn)驗證碼干擾，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-02-02