ECMAScript 5(ES5)中bind方法简介备忘

转载 2016年08月28日 16:04:00

http://www.cnblogs.com/leejersey/p/4374695.html一直以来对和this有关的东西模糊不清,譬如call、apply等等。这次看到一个和bind有关的笔试题,故记此文以备忘。

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

  直接看例子:

1
2
3
4
5
6
7
8
9
10
11
12
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指向获取想要的值:

1
2
3
4
5
6
7
8
9
10
11
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,兼容代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:

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

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

相关文章推荐

ECMAScript5 Object的新属性方法(包含Object.create()、Object.defineProperty()等)

虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受,目前主流的浏览器中只有低版本的IE不支持,其它都...

ECMAScript 5中的数组方法

(JavaScript权威指南 笔记)ECMAScript 5定义了几个新的数组方法, 根据功能可以分为 遍历 - forEach; 映射 - map; 过滤 - filter; ...

ECMAScript5数组新增方法

forEach(function(element,index,arr)) 改变原数组,遍历数组 var a = ["a","b",1,2,3]; a.forEach(function(elemen...

ECMAScript5 Object的新属性方法

ECMAScript5 Object的新属性方法 虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接...

ECMAScript 5中最常用的数组处理方法

最全面最常用的ECMAScript 5中最常用的数组处理方法 。。。。

ECMAScript5 Object的新属性方法

Object.create(prototype[,descriptors])这个方法用于创建一个对象,并把其prototype属性赋值为第一个参数,同时可以设置多个descriptors,关于decr...

ECMAScript5 Object新增的属性和方法

 虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受,目前主流的浏览器中只有低版本的IE不支持...

【ES6学习】— (5)异步编程async函数简介

之前学习了异步编程相关的Generator函数和Promise对象。ES7(目前处于提案阶段)中提供了更加方便的async来实现异步编程。本篇主要对async的相关知识点进行简单介绍。JavaScri...
  • Ahri_J
  • Ahri_J
  • 2016年11月01日 10:37
  • 466

《es6标准入门》读书笔记-第一章 ECMAScript 6简介

以下内容使用的书籍为《es6标准入门-第2版》,阮一峰著,如有需要请购买正版 本文仅为个人读书笔记,如有不详之处请查阅原文 运行环境 node环境的检查 babel转码器 babel功能 浏览器...

ECMAScript 6 学习系列课程 (ES6简介)

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECMAScript 5(ES5)中bind方法简介备忘
举报原因:
原因补充:

(最多只允许输入30个字)