在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获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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生成带有雪花背景的验证码
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
js里的prototype使用示例
2010/11/19 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
java必学必会之static关键字
2015/12/03 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JS中的phototype详解
2017/02/04 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue-router传参用法详解
2019/01/19 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中的heapq模块源码详析
2019/01/08 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
毕业生党员个人总结
2015/02/14 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis