脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript bind函数

javascript中bind函数的作用实例介绍

 更新时间：2014年09月28日 17:45:32   投稿：whsnow  
bind()的方法在ie,6,7,8中不适用，需要扩展通过扩展Function prototype可以实现此方法，下面为大家介绍下javascript中bind函数的作用
<!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

此时会发现this改变为text

函数字面量里也适用，目的是保持上下指向（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里的字会变色。可见this不为button而是obj。

bind()的方法在ie,6,7,8中不适用，需要扩展通过扩展Function prototype可以实现此方法。

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 );

将类似数组转换为数组

您可能感兴趣的文章:

相关文章

  • javascript中的隐式调用

    javascript中的隐式调用

    本篇文章给大家详细介绍了javascript中的隐式调用相关知识点，对此有兴趣的可以跟着小编一起学习下。
    2018-02-02
  • 详解JavaScript中Canvas的高级绘图和动画技术

    详解JavaScript中Canvas的高级绘图和动画技术

    JavaScript中的Canvas 是一个强大的 HTML5 元素,允许你通过编程方式创建图形、绘制图像和实现复杂的动画效果,在本文中,我们将深入探讨 JavaScript Canvas 的高级绘图和动画技术,并提供一个复杂的案例,以展示其潜力,需要的朋友可以参考下
    2023-10-10
  • js阻止事件追加的具体实现

    js阻止事件追加的具体实现

    可以使用 e.stopPropagation(); e.preventDefault();来阻止事件冒泡，和默认事件的执行。但不能阻止事件的追加，如要追加，请看下面的实现方法
    2014-10-10
  • 微信小程序 高德地图路线规划实现过程详解

    微信小程序 高德地图路线规划实现过程详解

    这篇文章主要介绍了微信小程序 路线规划实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript 上传文件限制参数案例详解

    JavaScript 上传文件限制参数案例详解

    这篇文章主要介绍了JavaScript 上传文件限制参数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • JavaScript实现将Word文档解析成浏览器认识的HTML

    JavaScript实现将Word文档解析成浏览器认识的HTML

    这篇文章主要为大家详细介绍了如何使用JavaScript实现将Word文档解析成浏览器认识的HTML,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • 小程序中手机号识别的示例

    小程序中手机号识别的示例

    这篇文章主要介绍了小程序中手机号识别的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Echarts图表分析巴西队历年战绩实例详解

    Echarts图表分析巴西队历年战绩实例详解

    这篇文章主要为大家介绍了Echarts图表分析巴西队历年战绩实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 原生JavaScript和Vue实现从百度地图抓取经纬度

    原生JavaScript和Vue实现从百度地图抓取经纬度

    在前端开发中,使用百度地图 API 来获取用户的经纬度是一种常见需求,本文提供了使用原生 JavaScript 和 Vue.js 实现从百度地图抓取经纬度的详细示例,需要的可以了解下
    2024-11-11
  • js实现验证码干扰（静态）

    js实现验证码干扰（静态）

    这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02

最新评论