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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
详解如何用模块化的方式写vuejs
Dec 16 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
用PHP连接Oracle数据库
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
利用python获得时间的实例说明
2013/03/25 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python 串口通信的实现
2020/09/29 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
C有"按引用传递"吗
2016/09/06 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
新学期开学标语
2014/06/30 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书