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. 简单高效快捷的百度地图demo

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  2. windows上传代码到github

    上传代码到github上有很多种方法,在这里我介绍一种比较简单的一种.工具嘛,越简单越好用啊. 1.首先下载github在windows下的客户端 下载地址:https://desktop.githu ...

  3. ：before :after

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  4. yum只下载不安装：yumdownloader

    如果只想通过yum下载软件的安装包,但是不需要进行安装的话,可以使用 yumdownloader 命令. yumdownloader 命令在软件包 yum-utils 里面. 先安装 yum-util ...

  5. adb catlog>d:\log.txt日志级别

    W,警告 I,通知 D,调试 E,错误 V, 到最细的日志 功能测试可以看W和E,性能测试I比较有用

  6. iOS一些常用的小知识点

    //获取全局的Delegate对象,这样我们可以调用这个对象里的方法和变量 [[UIApplication sharedApplication] delegate]; //获得程序的主Bundle N ...

  7. HTML5体验改进的14条军规

    来自公园<HTML5——用新方式创造更好的用户体验>线下活动中来自火速轻应用的技术总监胡敏东的分享.   1. fake 页 - 首屏加速 目标:首屏 3s 以内   因为 71% 的用户 ...

  8. Facebook 帆布接入的总结

    研究接入facebook也有不短的时间, 上线过几款产品,这里把接入所有的点 都记录一下. 1.首先进入facebook的开发者页面,直接入口在右下角更多里面 然后注册开发者账号, 创建APP 选择F ...

  9. js版扫雷（可直接运行试玩）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. ios--个人资料修改

    点击进行编辑  (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *) ...