在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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
React事件处理的机制及原理
Dec 03 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
详解JavaScript中的this指向问题
Feb 05 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
社区(php&&mysql)五
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP速成大法
2015/01/30 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
详解angular2.x创建项目入门指令
2018/10/11 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python实现的购物车功能示例
2018/02/11 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
竞选班干部演讲稿300字
2014/08/20 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
干部年终考核评语
2015/01/04 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript