在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 相关文章推荐
jQuery实现“扫码阅读”功能
Jan 21 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
js如何获取网页所有图片
May 12 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 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
模拟flock实现文件锁定
2007/02/14 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
如何实现JS函数的重载
2006/09/22 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python批量解压zip文件的方法
2019/08/20 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
初级会计求职信范文
2014/02/15 职场文书
生活小常识广播稿
2014/09/16 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
大国崛起英国观后感
2015/06/02 职场文书
歌剧魅影观后感
2015/06/05 职场文书
西游降魔篇观后感
2015/06/15 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS