在JavaScript中正确引用bind方法的应用


Posted in Javascript onMay 11, 2015

 在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用log("info…")代替,不假思索的会想到如下语法:

var log = console.log;
 log("info…");

     很遗憾,运行报错:TypeError: Illegal invocation。

     为啥呢?对于console.log("info…")而言,log方法在console对象上调用,因此log方法中的this指向console对象;而我们用log变量指向console.log方法,然后直接调用log方法,此时log方法的this指向的是window对象,上下文不一致,当然会报错了。

     此时我们可以用bind方法解决这个问题。bind方法允许手动传入一个this,作为当前方法的上下文,然后返回持有上下文的方法,例如:

var log = console.log.bind(console);
 log("info...");

     这样就不会报错了。

     但是,bind方法并不支持ie 8以及更低版本的浏览器,我们完全可以自己实现一个,很简单。

Function.prototype.bind = Function.prototype.bind || function(context){
   var _this = this;
   
   return function(){
     _this.apply(context, arguments);
   };
 };

     核心通过apply方法实现,闭包的经典应用。_this指向当前方法,context指向当前方法的上下文,二者均通过闭包访问。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 #Javascript
javascript实现获取字符串hash值
May 10 #Javascript
Javascript实现计算个人所得税
May 10 #Javascript
AngularJS基础知识笔记之表格
May 10 #Javascript
AngularJS基础知识笔记之过滤器
May 10 #Javascript
You might like
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
js 与或运算符 || && 妙用
2009/12/09 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
铣工实训报告
2014/11/05 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
仓库管理制度范本
2015/08/04 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers