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函数的作用的更多相关文章

  1. 网络通讯中 bind函数的作用

    面向连接的网络应用程序分为客户端和服务器端.服务器端的执行流程一般为4步,客户端程序相对简单,一般需要两个步骤. 服务器端执行流程4步如下: (1)调用socket函数,建立一个套接字,该套接字用于接 ...

  2. JavaScript中Eval()函数的作用

    这一周感觉没什么写的,不过在研究dwz源码的时候有一个eval()的方法不是很了解,分享出来一起学习 -->首先来个最简单的理解 eval可以将字符串生成语句执行,和SQL的exec()类似. ...

  3. 面试官：能解释一下javascript中bind、apply和call这三个函数的用法吗

    一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...

  4. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

  5. JavaScript中的函数-7---函数的作用,定义,调用

    JavaScript中的函数 函数也是对象,并且是javascript中的一等公民,可以用来创建普通对象.对象只是属性和值的集合 学习目标 1.掌握函数的作用 2.掌握函数的定义 3.掌握函数的调用 ...

  6. 浅析 JavaScript 中的 函数 currying 柯里化

    原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...

  7. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

  8. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  9. Javascript中call函数和apply函数的使用

    Javascript 中call函数和apply的使用: Javascript中的call函数和apply函数是对执行上下文进行切换,是将一个函数从当前执行的上下文切换到另一个对象中执行,例如: so ...

随机推荐

  1. android小技巧（一）

      1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.AC ...

  2. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  3. web浏览器兼容简要整理

    ajax的创建 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr ...

  4. Github注册过程

      一 github注册过程: 1.首先百度github官网,进入官网页面 2.在该页面分别输入昵称,昵称需要不和别人的重复,而后输入邮箱地址,该邮箱不能注册过这个网站,最后输入密码,密码至少要有七个 ...

  5. 基于ReentrantLock的AQS的源码分析（独占、非中断、不超时部分）

    刚刚看完了并发实践这本书,算是理论具备了,看到了AQS的介绍,再看看源码,发现要想把并发理解透还是很难得,花了几个小时细分析了一下把可能出现的场景尽可能的往代码中去套,还是有些收获,但是真的很费脑,还 ...

  6. html基础学习

    <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </ ...

  7. ES5 对数组方法的扩展 以及 正则表达式

    ES5 对数组的扩展 forEach map some every indexOf lastIndexOf forEach 与 map 语法: 数组.forEach(function ( v, i ) ...

  8. 用Python3实现表达式求值

    一.题目描述 请用 python3 编写一个计算器的控制台程序,支持加减乘除.乘方.括号.小数点,运算符优先级为括号>乘方>乘除>加减,同级别运算按照从左向右的顺序计算. 二.输入描 ...

  9. 关于 jsp 解析特殊字符的问题

    在项目中了 使用了一个UI封装好 的插件 经测试了可以返回一些特殊字符,但是因为是特殊字符,导致了jsp解析出错,使用了Jquery来添加了dom结构,添加完之后,Ui控件进行初始化的时候报错了,原因 ...

  10. 在VS的EF中连接MySQL

    VS没有主动提供那些繁多的连接器,需要的话得自己再安装这些第三方程序包. MySQL为windows平台开发者提供了许多程序包:http://dev.mysql.com/downloads/windo ...