ECMAScript5(ES5)中bind方法使用小结


Posted in Javascript onMay 07, 2015

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

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
JS中获取函数调用链所有参数的方法
May 07 #Javascript
jQuery中animate动画第二次点击事件没反应
May 07 #Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 #Javascript
JS实现文字掉落效果的方法
May 06 #Javascript
DOM 高级编程
May 06 #Javascript
js获得当前系统日期时间的方法
May 06 #Javascript
js字符串操作方法实例分析
May 06 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
python友情链接检查方法
2015/07/08 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
纽约海:Sea New York
2018/11/04 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
自荐信如何“自荐”
2013/10/24 职场文书
单位创先争优活动方案
2014/01/26 职场文书
奠基仪式策划方案
2014/05/15 职场文书
全运会口号
2014/06/20 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书