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 ...
随机推荐
- C++之虚函数和多态
干货较多-需要自己深思理解: C++支持两种多态性: 1.编译时多态性(静态绑定-早绑定) 在程序编译阶段即可以确定下来的多态性 通过使用 重载机制(重载函数)实现 (模板)http://blog.c ...
- centos7安装jdk8
1.查看是否已经安装了jdk rpm -qa|grep java 表示没有安装jre 如果已经安装请先卸载 2.查看可安装的java环境 yum list java* 3.安装 java-1.8.0- ...
- ios开发之网络php
接着前面的学习,几天上午学习了数据库网络值php用户的注册与登录,感觉代码与ios上的oc太相似了,因此学习下来没什么障碍了,下面是代码: 首先是javascript.html文件中: <!DO ...
- css:writing-mode属性
writing-mode属性 实现文字垂直排版 下面是css3语法: /* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: v ...
- C语言程序设计第二次作业
一.学习内容 掌握关系运算符.逻辑运算符.条件运算符 掌握常用数学函数的用法 if语句(单分支,双分支和多分支) 用switch语句实现多分支 理解多个if语句,if...else if... 和if ...
- 2016-08-01一起领略ReactJs的风采
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- IOS－当遇到tableView整体上移时的解决方案
方案一在使用了navigationController后,当界面进行跳转往返后,时而会出现tableView或collectionView上移的情况,通常会自动上移64个像素,那么这种情况,我们可以关 ...
- Guid与id区别
一.产生Guid的方法 1.SqlServer中使用系统自带的NEWID函数: select NEWID() 2.C#中,使用Guid类型的NewGuid方法: Guid gid; ...
- .net 如何引用迅雷组件
本文记录两个部分,本人自己引用迅雷组件的经历和引用迅雷组件相关原理 the first: 添加引用 -> COM -> ThunderAgent 1.0 Type Library(前提是已 ...
- linux命令行将已有项目提交到github
之前用git是在windows下用git的图形化界面进行操作的,这次有一个写了几天的小项目想提交到git上,linux命令行下面没有图形化的界面,所以全部需要git命令来操作. 实践之后,主要是下面几 ...