一直以来对和this有关的东西模糊不清,譬如call、apply等等。这次看到一个和bind有关的笔试题,故记此文以备忘。

  bind和call以及apply一样,都是可以改变上下文的this指向的。不同的是,call和apply一样,直接引用在方法上,而bind绑定this后返回一个方法,但内部核心还是apply。

  直接看例子:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};

window.a = window.b = 0;
console.log(obj.getCount(3, 4));  // 10
var func = obj.getCount;
console.log(func(3, 4));  // 7

  为何会这样?因为func在上下文中的this是window!bind的存在正是为了改变this指向获取想要的值:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};

window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4));  // 10

  bind是function的一个函数扩展方法,bind以后代码重新绑定了func内部的this指向(obj),但是不兼容ie6~8,兼容代码如下:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};

Function.prototype.bind = Function.prototype.bind || function(context) {
  var that = this;
  return function() {
    // console.log(arguments); // console [3,4] if ie<6-8>
    return that.apply(context, arguments);

  }
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4));  // 10

  其实在我看来bind的核心是返回一个未执行的方法,如果直接使用apply或者call:

var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10

  无法使用简写的func函数构造,所以用bind传递this指向,再返回一个未执行的方法,实现方式相当巧妙。

  

2015-6-10补充:

  昨天看到一个bind在代码中的装逼实现。如何用setTimeout连续打印0~9?

  以前试过的朋友肯定知道,直接打印是不行的,会打印出一样的数字,这时候就要用闭包了,闭包的话有两种方式,简单实现一种如下:

for(var i = 0; i < 10; i++) {
  ~function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

  但是居然用bind也能实现:

for(var i = 0; i < 10; i++) {
  setTimeout(console.log.bind(console, i), i * 1000);
}

  这样为何也能实现,我也是百思不得其解,只能说不明觉厉。

  bind是和apply、call一样,是Function的扩展方法,所以应用场景是func.bind(),而传的参数形式和call一样,第一个参数是this指向,之后的参数是func的实参,fun.bind(thisArg[, arg1[, arg2[, ...]]])。

  参考资料:bind

ECMAScript 5(ES5)中bind方法简介备忘的更多相关文章

  1. simplify the life ECMAScript 5(ES5)中bind方法简介

    一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不 ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. js学习进阶中-bind()方法

    有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...

  4. Javascript中bind()方法的使用与实现

    对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...

  5. jq中 load()方法 简介

    load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...

  6. C++中 _itoa_s方法简介

    _itoa_s 函数原型如下: _itoa_s ( int value, char *buffer, size_t sizeInCharacters, //存放结果的字符数组长度 int radix ...

  7. 用机器名访问和用Localhost访问时在IE中的区别(备忘)

    meta中未指定文档模式的时候, localhost访问文档模式默认是Edge 机器名访问时文档模式默认是IE7 <head>中添加 <meta http-equiv="X ...

  8. PHP中使用CURL之备忘(一)

    1.curl只能抓取页面的部分内容的原因分析: 错误提示:CURL transport error: transfer closed with outstanding read data remain ...

  9. Delphi 的各版本定义,用于预编译参数中,避免忘记备忘之

    DELPHI的版本宏: VER80 - Delphi 1 VER90 - Delphi 2 VER100 - Delphi 3 VER120 - Delphi 4 VER130 - Delphi 5 ...

随机推荐

  1. [原创]python之socket-ftp

    今天来讲讲ftp文件下载,感觉挺有趣的,知道吧,就那种看到新文件生成,而自己写的代码也不多,那种成就感! 一.需求: 客户端发送指令给服务端,服务端根据指令找到相应文件,发送给客户端 分析: PS:e ...

  2. [fiddler] 手机抓包

    最近工作涉及到与原生app联调,需要抓取手机上的请求.借此机会研究了下fiddler,简直神器. 以下简单介绍通过fiddler进行手机抓包的方法,之后也会陆续更新fiddler的其他功能 设置fid ...

  3. 计算机中数据实体和数据表示形式(以C#为例)

    摘自网络的一段话: “在程序代码中,可以用多种方式表示数据,十进制.十六进制.八进制都是常用的表示方式,但计算机内部永远就只使用二进制,与你写程序时用什么无关.你说要定义数组int a[10],其中涉 ...

  4. Solr Zookeeper ACL权限配置

    首先注意:在配置ACL的时候,请关闭solr运行实例!!否则可能对集群造成不可恢复的损坏 开始: 1.修改solr.xml,在solrCloud节点添加,告诉solr要使用的provider: < ...

  5. HDU 2577---How to Type

    HDU  2577 Description Pirates have finished developing the typing software. He called Cathy to test ...

  6. LeetCode Combination Sum III (DFS)

    题意: 在1-9这9个数字中选择k个出来,若他们的和为n,则加入答案序列,注意升序. 思路: 用DFS的方式,每次决定一个数字,共决策k次.假设上个决策是第i位为5,那么i+1位的范围就是6-9. c ...

  7. POJ-2378 Tree Cutting

    题目大意:一棵n个节点的树,找出所有的点满足:删除它之后,产生的最大(这里节点数最多即为最大)新树中节点数不超n的一半. 题目分析:两次深搜,过程类似求重心. 代码如下: # include<i ...

  8. C难点分析

    1. 形参和实参 调用函数时,写在括号里面的就是实参,函数本身用的就是形参. 2.字符串问题 char a[5]={"abcd"};注意是4个字符,而不是5个  字符串数组后面带  ...

  9. QTreeView使用点点滴滴

    QTreeView比较复杂,在这里记下所有用到的操作: ------------------------------------------------------------------------ ...

  10. Android学习笔记(20)————利用ListView制作带竖线的多彩表格

    http://blog.csdn.net/conowen/article/details/7421805 /********************************************** ...