在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开发时的五个注意事项
Dec 08 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
jquery replace方法去空格
May 08 jQuery
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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实现生成模糊图片的方法示例
2017/12/21 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
28个JS验证函数收集
2010/03/02 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python调用C/C++的方法解析
2020/08/05 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
公司承诺书范文
2014/05/19 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript