什么是this对象

先来说说什么是this对象吧。每一个函数在调用的时候都会自己主动获取两个特殊变量:this和arguments对象。

this值详细是指哪个对象是和该函数的运行环境相关的。假设是作为对象的方法,那么this就是对象实例本身;假设是一个全局函数,那么this就是window对象。用一句话来概括,this就是调用这种方法的对象。

保持this上下文

有时候。我们须要保持this的上下文,也就是在一个运行环境中想要訪问到还有一个运行环境的this值。在什么时候须要这么做呢?比方说将一个对象的方法赋值给了一个全局变量,然后在全局变量中调用这种方法,那么this值就不再是原来的对象而是window对象了,然而可能我们仍须要在全局环境中依照对象的方法来调用。又比方说一个方法中包括了闭包,闭包是无法訪问到其外部函数的this对象的,由于this对象是在调用方法的时候自己主动生成,内部函数在搜索这两个变量的时候仅仅会搜索到其自身的活动对象。而不会沿着作用域链往外搜索,所以闭包訪问不到外部函数的this值。

假设要想訪问,就应该想办法把this值传递下去。 
通常能够通过这种方式保持this上下文:在外部函数中将this缓存到一个变量中,通常变量名称使用self, _this 或者 context。那么闭包就能够通过这个可訪问的变量来获取外部函数的this值,this上下文得以保持。比方以下的代码:

var myObj = {

    specialFunction: function () {},
getAsyncData: function (cb) {
cb();
}, render: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
});
}
};
myObj.render();

这里有一个对象myObj。它有一个render实例方法,在这种方法内部又调用了它的还有一个实例方法getAsyncData,而这种方法有一个新的函数作为參数,这个函数相当于是一个闭包。是不能获取到外部函数中的this值的。为了在这个闭包中也能訪问实例方法,须要获取到外部环境的this值,这里把this(this为调用render方法的对象。即实例对象myObj)缓存到了变量that中。

此外还可通过bind方法,这就是本文所要讲述的重点。

bind方法

bind方法生成了一个新的函数,称为绑定函数,传入bind方法的第一个參数作为这个绑定函数的this对象,传入bind的第二个參数连同后面调用绑定函数时传入的參数依照先后顺序(传入bind的在前)构成绑定函数的參数。 
如今我们把上面的样例改动一下:

render: function () {
this.getAsyncData(function () { this.specialFunction(); }.bind(this)); }

.bind()创建了一个函数,当这个函数在被调用的时候。它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的參数) 
再看一个bind的使用样例:

var foo = {
x: 3
}
var bar = function(){
console.log(this.x);
}
bar();
// undefined var boundFunc = bar.bind(foo); boundFunc();
// 3

将bar方法和foo对象绑定后,bar中的this对象被替换为了foo,并生成了一个新的函数boundFunc,因此在全局环境中调用boundFunc时。也能够訪问到foo对象的属性。 
还能够了解一下Function.prototype.bind()内部是什么样的:

Function.prototype.bind = function (scope) {
var fn = this;//this是调用bind方法的对象(别的方法对象)
return function () {
return fn.apply(scope);//把fn环境中的this替换为scope
};
}

可看出,bind方法返回了一个新的函数。这种方法返回了原方法(调用bind的方法)通过apply改动作用域(传入的參数scope)后的运行结果。假设调用这个新函数则会马上运行fn.apply(scope)。并返回运行后的结果。

fn.bind()

与call、apply的差别

call、apply是改动函数的作用域,而且马上运行。而bind是返回了一个新的函数,不是马上运行,即call and apply call a function while bind creates a function。

bind在回调函数中经常使用到。

參考资料: 
理解 JavaScript 中的 Function.prototype.bind 
js中bind、call、apply函数的使用方法 
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

转载:https://www.cnblogs.com/blfbuaa/p/7110641.html

用bind方法保持this上下文的更多相关文章

  1. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  2. javascript中利用柯里化函数实现bind方法

    柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预 ...

  3. 如何在JavaScript中正确引用某个方法(bind方法的应用)

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

  4. js的bind方法

    转载:http://www.jb51.net/article/94451.htm http://www.cnblogs.com/TiestoRay/p/3360378.html https://seg ...

  5. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  6. JS中的bind方法学习

    EcmaScript5给Function扩展了一个方法:bind 众所周知 在jQuery和prototype.js之类的框架里都有个bind jQuery里的用途是给元素绑定事件 $("# ...

  7. Javascript中bind()方法的使用与实现

    对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...

  8. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  9. javascript中函数的call,apply及bind方法

    call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,  [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...

随机推荐

  1. 4月第4周业务风控关注 | 网络犯罪经济每年1.5万亿美元 GDP居全球第12位

    本文由  网易云发布. 易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1.网络 ...

  2. spring jdbc批量插入

    http://blog.csdn.net/fyqcdbdx/article/details/7366439

  3. C/C++ 语言 Hello world

    #include <stdio.h> void main() { int x,i; ; scanf("%d",&x); if(x>y) printf(&q ...

  4. 访问www.baidu.com后会发生什么(一次完整的网络通讯过程)

    1.在浏览器中输入www.baidu.com 这意味着浏览器要向百度发送一个网页数据包,要发送数据包,需要知道对方的IP地址,这里我们只知道网址为www.baidu.com,却不知道IP地址,此时应用 ...

  5. zookeeper链接数导致kafka storm不能正常工作

    报错信息: java.lang.RuntimeException: java.lang.RuntimeException: java.lang.RuntimeException: org.apache ...

  6. 2. Linear Model

    1. 基本形式 给定由$d$个属性描述的示例 $\textbf{x} =(x_1;x_2;...,x_n)$,其中$x_i$是$x$在第$i$个属性上的取值,线性模型(linear model)试图学 ...

  7. 从您的帐户中删除 App 及 iTunes Connect 开发人员帮助

    iTunes Connect 开发人员帮助 从您的帐户中删除 App 删除您不想继续销售或提供下载,且不会再重新使用其名称的 App.如果您的 App 至少有一个获准的版本,且最新版本处于下列状态之一 ...

  8. UIDevice currentDevice model possible values

    NOTE: The below code may not contain all device's string, I'm with other guys are maintaining the sa ...

  9. Backing Up and Restoring HBase Data

    There are two strategies for backing up HBase:1> Backing it up with a full cluster shutdown2> ...

  10. (转)更换镜像rootvg卷组中的硬盘

    F85系统镜像盘更换实录之一:删除原有镜像操作 # cfgmgr # lsdev -Cc disk hdisk0 Available 11-09-00-8,0  16 Bit LVD SCSI Dis ...