关闭

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

182人阅读 评论(0) 收藏 举报
分类:

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指向,再返回一个未执行的方法,实现方式相当巧妙。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ES5的Function新增的bind方法简单介绍

Function.bind(obj, arguments)说明1. 简单来说,这个的返回值是一个函数,该函数未执行,该函数中的this指向obj这个对象。 2. 有一些类似apply和call,但是a...
  • qq20004604
  • qq20004604
  • 2016-11-25 00:20
  • 516

学习ECMAScript5规范中Object新增的API

Object在javascript编程中的重要性不言而喻,本文主要介绍下ECMAScript5规范Object新增的几个API。ECMAScript 5.1 (或ES5) 是ECMAScript(基于...
  • aitangyong
  • aitangyong
  • 2015-10-25 11:54
  • 1051

ES6详解一:复习ES5 新增内容

ES5 新增内容ES6 最近炒得火热,准备写一下ES6规范的主要内容。在这之前先复习一下ES5相关的内容。ES5 总体来说改动很少,最重要的是如下几个改动:use strict可以在函数定义的第一行通...
  • lihongxun945
  • lihongxun945
  • 2015-07-14 09:47
  • 4699

ECMAScript 2015官方文档翻译(一)

以下内容为翻译软件结合自己人工翻译,如有错误欢迎指正。 Introduction       这个ECMA标准定义了ECMAScript2015语言。这是第六版的ECMAScript语言规范。自1...
  • qiyuanhjc
  • qiyuanhjc
  • 2017-06-19 15:39
  • 574

ECMAScript5 严格模式,JSON,及其它

ECMAScript5 严格模式,JSON,及其它 ECMAScript5 规范自推出以来, 对javascript的发展产生了蛮大的影响。这篇文章是我翻译自John Resig(jQuer...
  • whereismatrix
  • whereismatrix
  • 2015-05-10 15:10
  • 1291

ES5中关于数组的一些方法(检测数组、遍历数组等)

一. 检测数组 1. 对于一个网页, 或者只有一个全局作用域来说, 使用instanceof操作符就可以检测是否为数组了: if(value instanceof Array){     re...
  • u012863664
  • u012863664
  • 2016-12-21 15:38
  • 1075

ECMAScript5(ES5)标准中扩展的数组Array方法

上次整理ES6的数组扩展方法 觉得ES5的数组方法都忘得差不多了 索性就复习总结一下 ES5扩展的数组方法还是很有用的迭代forEach()这是ES5数组方法中最基本的一个了 也非常的简单,就...
  • q1056843325
  • q1056843325
  • 2016-12-28 14:45
  • 1557

ES5中新增的Array方法详细说明

一、前言 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了。 ES5中新增了写数组方法,如下: forEach ...
  • u013063153
  • u013063153
  • 2016-09-03 17:08
  • 339

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方。 原型链的特点和实现已经在之前的一篇整理说过了,就...
  • heyue_99
  • heyue_99
  • 2017-02-08 23:08
  • 1941

ES5 标准对象说明

Contents 1 全局对象 1.1 全局对象的值属性 1.1.1 NaN1.1.2 Infinity1.1.3 undefined 1.2 全局对象的函...
  • lgh1117
  • lgh1117
  • 2016-04-28 23:33
  • 1541
    个人资料
    • 访问:2971716次
    • 积分:28876
    • 等级:
    • 排名:第208名
    • 原创:122篇
    • 转载:1964篇
    • 译文:0篇
    • 评论:261条
    最新评论