在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判断复选框是否勾选的原理及示例
May 21 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
易被忽视的js事件问题总结
May 14 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
详解webpack loader和plugin编写
Oct 12 Javascript
vuex的module模块用法示例
Nov 12 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python发送邮件脚本
2018/05/22 Python
python中嵌套函数的实操步骤
2019/02/27 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python 如何在字符串中插入变量
2020/08/01 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
主题党日活动总结
2014/07/08 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
公积金具结保证书
2015/05/11 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers