在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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
Vue3 中的数据侦测的实现
Oct 09 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模板函数 正则实现代码
2012/10/15 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
用javascript操作xml
2006/11/04 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
python处理csv数据的方法
2015/03/11 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
房产销售经理职责
2013/12/20 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
电子信息专业自荐书
2014/02/04 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript