一直以来对和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. C# 使用AForge调用笔记本摄像头拍照

    vs2012  winform 连接摄像头设备,这里需要引入 代码: using AForge; using AForge.Controls; using AForge.Imaging; using ...

  2. Objective C中的ARC的修饰符的使用---- 学习笔记九

    #import <Foundation/Foundation.h> @interface Test : NSObject /** * 默认的就是__strong,这里只是做示范,实际使用时 ...

  3. MongoDB数据库的操作,增删改查

    在student集合中插入一些数据 db.student.insert({ "学号":10010, "姓名":"德莱文", "年龄 ...

  4. Microsoft Orleans 之 入门指南

    Microsoft Orleans 在.net用简单方法构建高并发.分布式的大型应用程序框架. 原文:http://dotnet.github.io/orleans/ 在线文档:http://dotn ...

  5. AE,按照属性值关系选择要素

    if(axMapControl2.LayerCount<=0) { MessageBox.Show("请加载图层后使用该功能","系统提示",Messag ...

  6. repo andrid

    http://www.cnblogs.com/bluestorm/p/4419135.html

  7. .NET Framework 4.5 的五大特性

    介绍 从.NET4.5发布到现在已经有一年多了.但问题是针对最近微软发布的版本信息中,大部分的.NET开发人员所讨论交流的只是其中的一两个特性.其他的特性仅仅停留在MSDN中或者沦为简介文档.例如:现 ...

  8. jquery相关校验以及jquery其他知识总结

    //************jquery校验**********/ //数字校验(整数)function isDigit(str) { var patrn=/^[0-9]*$/; return pat ...

  9. 表单校验组件ValidForm

    10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中 (文件里这个注释 "/*==========以下部分是Validf ...

  10. 正则表达式入门教程&amp;&amp;经典Javascript正则表达式(share)

    前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...