在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 相关文章推荐
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
在vue中使用console.log无效的解决
Aug 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连接Oracle for NT 远程数据库
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php横向重复区域显示二法
2008/09/25 PHP
使用php计算排列组合的方法
2013/11/13 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
Python实现简单字典树的方法
2016/04/29 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
副董事长岗位职责
2014/04/02 职场文书
保证书格式范文
2014/04/28 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
幼师小班个人总结
2015/02/12 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
flex弹性布局详解
2022/03/20 HTML / CSS