在JavaScript中正确引用bind方法的应用

   本文的重点在于讨论bind()方法的实现,在开始讨论bind()的实现之前,我们先来看看bind()方法的使用,有需要的小伙伴可以参考下。

  在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用log("info…")代替,不假思索的会想到如下语法:

  ?

1
2

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,作为当前方法的上下文,然后返回持有上下文的方法,例如:

  ?

1
2

var log = console.log.bind(console);
log("info...");

  这样就不会报错了。

  但是,bind方法并不支持ie 8以及更低版本的浏览器,我们完全可以自己实现一个,很简单。

  ?

1
2
3
4
5
6
7

Function.prototype.bind = Function.prototype.bind || function(context){
var _this = this;
 
return function(){
_this.apply(context, arguments);
};
};

  核心通过apply方法实现,闭包的经典应用。_this指向当前方法,context指向当前方法的上下文,二者均通过闭包访问。

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2016-05-12

在JavaScript中正确引用bind方法的应用的相关文章

在JavaScript中正确引用bind方法的应用_javascript技巧

 在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info-")来说,避免书写冗长的console,直接用log("info-")代替,不假思索的会想到如下语法: var log = console.log; log("info-");      很遗憾,运行报错:TypeError: Illegal invocation.      为啥呢?对于console.log(

JavaScript中的prototype.bind()方法介绍

 在JavaScript中,我们经常用到函数绑定,而当你需要在另一个函数中保持this上下文时,使用Function.prototype.bind()会很方便 以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业. 下面举个简单的例子:   代码如下: var myObj = {     specialFunction: function () {     },     anot

JavaScript中的prototype.bind()方法介绍_基础知识

以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业.下面举个简单的例子: 复制代码 代码如下: var myObj = {    specialFunction: function () {    },    anotherSpecialFunction: function () {    },    getAsyncData: function (cb) {        c

jQuery中live与bind方法的区别

 本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用   live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间   区别一:   Click here   可以给这个元素绑定一个简单的click事件:   $('.clickme').bind('click', function() { $('body

javascript中定义类的方法详解

 这篇文章主要详细介绍了javascript中定义类的方法的相关资料,需要的朋友可以参考下     JS中定义类的方式有很多种: 1.工厂方式   代码如下: function Car(){ var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showColor = function(){ document.write(this.color) }; return ocar; } var car1 = Car(

javascript中call,apply,bind函数用法示例_javascript技巧

本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu

关于JavaScript中事件绑定的方法总结_javascript技巧

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

javascript中,console.log()方法怎么用

问题描述 javascript中,console.log()方法怎么用 网上搜到关于console.log()的信息是:firbug里的一种调试方法,IE8以上版本支持该方法:但是一直不知道该怎么用,请看下面代码: <script type="text/javascript"> var a=[1,2,3,4,5]: for(var i=0; i<a.length; i++) console.log(a[i]); </script> 上面代码应该输出数组a的

简述JavaScript中正则表达式的使用方法

  这篇文章主要介绍了JavaScript中正则表达式的使用方法,正则表达式是JS进阶学习中的重要知识,本文简述了JS对正则表达式的支持情况,需要的朋友可以参考下 正则表达式是一个对象,它描述了字符模式. JavaScript的RegExp类表示正则表达式和字符串和正则表达式定义,使用正则表达式来进行强大的模式匹配和搜索和替换文本功能的方法. 语法: 正则表达式可以用RegExp( ) 构造这样的定义: ? 1 2 3 4 5 var pattern = new RegExp(pattern,