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. 2013年最棒的4个PHP框架

    PHP 框架可以帮你编写简洁可重用的代码,遵循 MVC 模式,确保应用逻辑和展现分离.有很多很多的框架各有千秋,有的性能好,有的文档全,还有的提供大量的内建功能等等. 这里我们罗列的 2013 年最好 ...

  2. Linux网络编程(多人在线聊天系统)

    一.首先是服务器的建立 首先是一个信号终止程序,发信号ctrl+c终止程序,而是是初始化网络通信. 创建一个描述符负责绑定服务器和监听服务器接收客户端的消息. socket()->sockadd ...

  3. NGUI如何使2D图片按像素1：1显示在屏幕上

    NGUI版本为3.5.1. 将camera 设置为正交模式,size值设为1. UIRoot(2D)有3种缩放样式: 1.PixelPerfect.UI严格按照指定的像素大小显示,不会随着屏幕的分辨率 ...

  4. C++的STL

    今天,看一段代码的时候发现只一句话就做了个排序,是这样的: sort(rotateArray.begin(),rotateArray.end()); 很震惊,后来查了一下sort的用法, sort函数 ...

  5. Outlook查找未读邮件

    1.查找新邮件的未读邮件,可以在下图中查找 2.恢复已删除邮件,如果邮件是未读邮件,在上图中是查找不到,只能通过视图去查找 步骤2内容摘自百度

  6. 探索javascript----滚轮事件的兼容

    具体使用时,我们还要判断浏览器,记得传入的是兼容事件:var e=window.event||ev; 选择事件:

  7. Java第六次作业修改版

    import java.util.ArrayList; import java.util.Collections; import java.util.Random; public class Draw ...

  8. zepto.js学习

    除了$( Zepto)对象上的直接方法外(如$.extend),文档对象中的所有方法都是集合方法. $.grep v1.0+ $.grep(items, function(item){ ... }) ...

  9. 用Unity写一个12306验证器的恶搞图生成软件

    前言 前一阵子是买火车票的高峰期,然后12306的验证码就遭到各种吐槽.其实大部分验证码没有那么难,大家只是因为买不到票 发泄一下不满的情绪.于是各种恶搞的图就出现了,比如找二次元里人物的矮子,找好男 ...

  10. android 定时任务

    使用timertask进行定时任务 首先创建TimerTask: class SynchroTimerTask extends TimerTask { @Override public void ru ...