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. C++ 之 auto_ptr and shared_ptr

    1.auto_ptr 这个所谓的只能指针有点鸡肋!  没有引用计数,而且还有一个所有权转移的情况! 当所有权转移后,以前的auto_ptr将会成为null 2.shared_ptr 增加了引用计数,没 ...

  2. DateTimePicker如何与Delphi自带Style同步

    Delphi 的 DateTimePicker 组件有一个CalColors属性,可以设置 DropDown 打开的日历节目的风格.但如果不使用 Delphi 自带的 Style,在这里设置属性看不到 ...

  3. SparkMLlib之 logistic regression源码分析

    最近在研究机器学习,使用的工具是spark,本文是针对spar最新的源码Spark1.6.0的MLlib中的logistic regression, linear regression进行源码分析,其 ...

  4. JS总结 运算符 条件语句

    算术运算符+-*/ 与数学计算一致,配合()号进行各种计算 另外,+号还可以达到连接的作用.例如: var a = 15; alert("a的值等于"+a); 前后增减量运算符: ...

  5. NPOI 数据导入导出

    { //数据导入 OpenFileDialog open = new OpenFileDialog(); open.Filter = "Excle文件|*.xls"; open.T ...

  6. 【搬砖】【Python数据分析】Pycharm中plot绘图不能显示出来

    最近在看<Python数据分析>这本书,而自己写代码一直用的是Pycharm,在练习的时候就碰到了plot()绘图不能显示出来的问题.网上翻了一下找到知乎上一篇回答,试了一下好像不行,而且 ...

  7. peersim中BT网络核心代码解析

    首先大概介绍BT网络运行的整体流程: 开始阶段,一个节点加入到网络中,并向tracker节点发送信息,tracker返回若干个邻居的列表 得到列表后,向每个邻居发送bitfiled信息,来获取他们的文 ...

  8. 【LeetCode OJ】Maximum Depth of Binary Tree

    Problem Link: https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ Simply BFS from root an ...

  9. JAVA(3)

    接口注意事项: 1.接口不能被实例化 2.接口中所有的方法都不能有主体  (不能有{ }) 3.一个类可以实现多个接口 4.接口中可以有变量<但变量不能用private和protected修饰& ...

  10. callee的用法

    callee返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.[function.]arguments.callee可选项 function 参数是当前正在执行的 ...