快捷導(dǎo)航

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

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

bind()的方法在ie,6,7,8中不適用，需要擴(kuò)展通過擴(kuò)展Function prototype可以實(shí)現(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>

此時(shí)加入bind

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

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

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

 button.onclick = function() {

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

 }.bind(text);

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

此時(shí)會(huì)發(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();

此時(shí)點(diǎn)擊按鈕text里的字會(huì)變色?？梢妕his不為button而是obj。

bind()的方法在ie,6,7,8中不適用，需要擴(kuò)展通過擴(kuò)展Function prototype可以實(shí)現(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;
};
}

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

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

slice = Array.prototype.slice,

或

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

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

您可能感興趣的文章:

bind

相關(guān)文章

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