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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
原生js实现省市区三级联动代码分享
Feb 12 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 array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python基础教程之缩进介绍
2014/08/29 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
老师推荐信
2013/10/28 职场文书
高二地理教学反思
2014/01/24 职场文书
学习自我鉴定
2014/02/01 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
keepalived + nginx 实现高可用方案
2022/12/24 Servers