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 ...
随机推荐
- Windows对象
JS之Window对象 一.说明: 他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗 ...
- VS2012 调试时 局部变量显示不全的问题解决
在工程上右键,打开属性页,配置属性——C/C++——优化,将优化改为“已禁用/Od“
- Read Excel file from C#
Common way is: var fileName = string.Format("{0}\\fileNameHere", Directory.GetCurrentDirec ...
- 错误：媒体集有 2 个媒体簇，但只提供了 1 个 sql2005 备份错误。
错误:媒体集有 2 个媒体簇,但只提供了 1 个 sql2005 2010-10-19 11:44:06| 分类: sql|举报|字号 订阅 ql2005备份的时候,选择备份路径是一方面,但 ...
- android手动修改density（dpi）的方法
Android系统中会根据屏幕分辨率范围,制定默认的density,既320(xhdpi),那么我们也可以手动修改density. 修改的方式在system.prop中修改ro.sf.lcd_dens ...
- pip 下载慢
经常在使用Python的时候需要安装各种模块,而pip是很强大的模块安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以我们最好是将自己使用的pip源更换一下,这样就能解决被墙导致的装不上库的 ...
- Codeforces Round #376 (Div. 2)
A 模拟 #include <cstdio> #include <cstring> int Ans; ]; inline ?x:-x;} inline int Min(int ...
- Java随笔三
1.接口: 1)接口不是类,不能使用new运算符实例化一个接口,而是对类的一组需求描述,这些类要遵循接口描述的统一格式进行定义.个人感觉像C语言中的函数在头文件中的预先声明,但是包含了一些类的特点,比 ...
- Linux 知识框架
Linux要点 一.Linux的基本要求 1． 掌握至少50个以上的常用命令. 2． 熟悉Gnome/KDE等X-windows桌面环境操作 . 3． 掌握.tgz..rpm等软件包的常用安装方法 4 ...
- OD调试17
程序先出现一个nag 然后出现主窗口 然后出现第二个nag窗口 我们查个壳 没有壳 那就载入OD看看,继续用调用堆栈的方法 发现一直执行用的都是这一个call,最后执行到程序结束.之 ...