javascript中bind函数的作用
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中bind函数的作用的更多相关文章
- 网络通讯中 bind函数的作用
面向连接的网络应用程序分为客户端和服务器端.服务器端的执行流程一般为4步,客户端程序相对简单,一般需要两个步骤. 服务器端执行流程4步如下: (1)调用socket函数,建立一个套接字,该套接字用于接 ...
- JavaScript中Eval()函数的作用
这一周感觉没什么写的,不过在研究dwz源码的时候有一个eval()的方法不是很了解,分享出来一起学习 -->首先来个最简单的理解 eval可以将字符串生成语句执行,和SQL的exec()类似. ...
- 面试官：能解释一下javascript中bind、apply和call这三个函数的用法吗
一.前言 不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...
- 博文推荐】Javascript中bind、call、apply函数用法
[博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...
- JavaScript中的函数-7---函数的作用,定义,调用
JavaScript中的函数 函数也是对象,并且是javascript中的一等公民,可以用来创建普通对象.对象只是属性和值的集合 学习目标 1.掌握函数的作用 2.掌握函数的定义 3.掌握函数的调用 ...
- 浅析 JavaScript 中的 函数 currying 柯里化
原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- Javascript中call函数和apply函数的使用
Javascript 中call函数和apply的使用: Javascript中的call函数和apply函数是对执行上下文进行切换,是将一个函数从当前执行的上下文切换到另一个对象中执行,例如: so ...
随机推荐
- Android --差缺补漏之 Intent&putExtra()
伴随着Android Developers 的开发,再也不用FQ了,这意味着Android 对中国学习者有着越来越多的官方学习资料,学习起来有更明确的方向和目标. Android Developer ...
- 《C++primer》v5 第7章 类 读书笔记 习题答案
7.1.7.2.7.3 #include<iostream> #include<cstdio> #include<vector> #include<strin ...
- Mybatis 源码分析--crud
增加源码分析-insert() --------------------------------------------------------------------- public int ins ...
- Guid和Sequence做主键的比较
记得A项目组是一个物流管理系统,后台采用了Oracle数据库.在系统中的核心表托运单表中,关于主键采用何种数据类型,是 sequence 还是用GUID , 大家起了争论. 从网络搜索得到的结论看,一 ...
- url路由、模板语言、ajax、用django框架创建表
1.后台管理的左侧菜单,默认只有第一个页签下面的选项是显示的,点了别的页签再显示别的页签下面的选项,问题是:点了任何菜单的选项后,左侧菜单又成了第一个页签的选项显示,别的页签隐藏,也就是左侧的菜单刷新 ...
- RABBITMQ（小总结 持续更新...
(一)理解消息通信 1.消息通信概念---消费者.生产者和代理 生产者(producer)创建消息,然后发送到代理服务器(RaabitMQ). 其中消息包括两部分内容:有效载荷(payload)和标签 ...
- B样条基函数（cubic spline basis）
B样条基函数用作权重 reference http://blog.csdn.net/tuqu
- selenium win7+selenium2.0+python环境搭建
- logstash 添加nginx日志
选择需求分类废话少说直接上图 第一张图: 2.此图搭配的日志格式是: log_format main '$remote_addr - $remote_user [$time_local] $http_ ...
- Mac安装windows虚拟机攻略
5月初从阿里滚粗,然后失去了公司发的Mac Air.说实话Mac机器确实比windows好用一些,于是怒而买了一个Mac Pro. 结果一个星期后我从学校带出来的联想笔记本又被老师通知要进行固定资产盘 ...