转载:http://www.jb51.net/article/94451.htm

http://www.cnblogs.com/TiestoRay/p/3360378.html

https://segmentfault.com/a/1190000002662251

对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind() ,只是你有可能仍然没有意识到这点。

第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它。

一. bind的语法

bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数的值。

1.1 定义

bind()的定义如下:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体。当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。

1.2 原理

可以用如下代码模拟bind()的原理:

1
2
3
4
5
6
Function.prototype.bind = function(context) {
 var self = this; // 保存原函数
 return function() { // 返回一个新函数
  return self.apply(context, arguments); // 执行新函数时,将传入的上下文context作为新函数的this
 }
}

1.3 语法

1
Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

二. bind的应用场景

2.1 实现对象继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var A = function(name) {
 this.name = name;
}
 
var B = function() {
 A.bind(this, arguments);
}
 
B.prototype.getName = function() {
 return this.name;
}
 
var b = new B("hello");
console.log(b.getName()); // "hello"

2.2 事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var paint = {
 color: "red",
 count: 0,
 updateCount: function() {
  this.count++;
  console.log(this.count);
 }
};
 
// 事件处理函数绑定的错误方法:
document.querySelector('button')
 .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象
 
// 事件处理函数绑定的正确方法:
document.querySelector('button')
 .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint

2.3 时间间隔函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var notify = {
 text: "Hello World!",
 beforeRender: function() {
  alert(this.text);
 },
 render: function() {
 
  // 错误方法:
  setTimeout(this.beforeRender, 0); // undefined
 
  // 正确方法:
  setTimeout(this.beforeRender.bind(this), 0); // "Hello World!"
 }
};
 
notify.render();

2.4 借用Array的原生方法

1
2
3
4
var a = {};
Array.prototype.push.bind(a, "hello", "world")();
 
console.log(a); // "hello", "world"

三. bind()方法的浏览器兼容性

四. bind()的兼容性写法

1
2
3
4
5
6
7
8
9
10
11
12
if (!Function.prototype.bind) {
 Function.prototype.bind = function() {
  var self = this, // 保存原函数
   context = [].shift.call(arguments), // 需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转成数组
  return function() { // 返回一个新函数
   // 执行新函数时,将传入的上下文context作为新函数的this
   // 并且组合两次分别传入的参数,作为新函数的参数
   return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
  }
 };
}

五. bind与 call/apply方法的区别

共同点:

都可以改变函数执行的上下文环境;

不同点:

bind: 不立即执行函数,一般用在异步调用和事件; call/apply: 立即执行函数。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能有一定的帮助,如果有疑问大家可以留言交流。

js的bind方法的更多相关文章

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

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

  2. 理解js中bind方法的使用

    提到bind方法,估计大家还会想到call方法.apply方法:它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向.需要注意的是bind 是返回新的函数,以便 ...

  3. JS高级---bind方法的使用

    bind方法的使用 //通过对象,调用方法,产生随机数 function ShowRandom() { //1-10的随机数 this.number = parseInt(Math.random() ...

  4. JS高级---bind方法

    bind方法 复制了一份的时候, 把参数传入到了f1函数中, x===>10, y===>20, null就是this, 默认就是window bind方法是复制的意思, 参数可以在复制的 ...

  5. js实现bind方法

    //目标函数 function fun(...args) { console.log(this); console.log(args); } //目标函数原型对象上的一个方法cher func.pro ...

  6. JS bind()方法、JS原生实现bind()

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  7. js中bind解析

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  8. js中bind,call,apply方法的应用

    最近用js的类写东西,发现一个无比蛋疼的事,那就是封装的类方法中的this指针经常会改变指向,失去上下文,导致程序错误或崩溃. 比如: function Obj(){ this.type = &quo ...

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

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

随机推荐

  1. DGbroker三种保护模式的切换

    1.三种保护模式 – Maximum protection 在Maximum protection下, 可以保证从库和主库数据完全一样,做到zero data loss.事务同时在主从两边提交完成,才 ...

  2. 浴室随想——RogueLike随想

    好玩的RogueLike 0 不同的追求 1 从追求中寻找商机 2 更的直接方法 3 我的追求 4 我的方法 5 好玩的RogueLike RogueLike游戏很好玩,因为你永远不知道接下来会发生什 ...

  3. perl操作sybase

    设置环境变量 export PERL5LIB=:/redhat/perl/lib64/perl5 安装DBI tar -xzvf DBI-1.631.tar.gz cd DBI-1.631 perl ...

  4. scalac error: bad option: '-make:transitive' on mvn package via command line

    1 问题描述: ubuntu环境下用eclipse+maven开发Scala的时候出现错误:scalac error: bad option: '-make:transitive' on mvn pa ...

  5. vmware 10 e1000e e1000e_cyclecounter_read 挂机解法

    http://ehc.ac/p/e1000/mailman/message/34100875/In the e1000e_cyclecounter_read function, if incvalue ...

  6. mysql 分库分表

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...

  7. 浅谈Java泛型之<? extends T>和<? super T>的区别

    关于Java泛型,这里我不想总结它是什么,这个百度一下一大堆解释,各种java的书籍中也有明确的定义,只要稍微看一下就能很快清楚.从泛型的英文名字Generic type也能看出,Generic普通. ...

  8. AI (Adobe Illustrator)详细用法(三)

    本文主要是介绍和色彩相关的用法. 一.路径外观设置 1.设置描边粗细 手动输入20px 下拉选择 鼠标选中数值,按向上或向下的箭头调整 在右边的描边菜单中修改 Note:按住shift键,然后上下箭头 ...

  9. [转]Hide or Remove jquery ui tab based on condition

    本文转自:http://stackoverflow.com/questions/19132970/hide-or-remove-jquery-ui-tab-based-on-condition 问: ...

  10. 平面直接坐标系线段相交问题(小Q(钟神)的问题)

    [问题描述] 小 Q 对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目:首先,小 Q 会在?轴正半轴和?轴正半轴分别挑选?个点.随后,他将 ...