浅谈javascript中this的指向

浅谈javascript中this的指向

调用位置

在理解this的绑定过程之前,首先要理解调用位置。调用位置就是函数在代码中被调用的位置,而不是声明的位置。只有仔细分析调用位置才能回答这个问题,这个this到底引用什么?
通常来说,寻找调用位置,就是寻找函数被调用的位置,但是做起来并没有那么简单,因为某些编程模式可能会隐藏真正的调用位置。
最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。
下面我们来看看到底什么是调用栈和调用位置:

function baz () {
    //当前调用栈是baz
    //因此,当前调用位置是全局作用域
    console.log("baz");
    bar();//bar 的调用位置
}
function bar () {
    //当前调用栈是baz-》bar
    //因此,当前调用位置在baz中
    console.log("bar");
    foo();
}
function foo(){
    //当前调用栈是baz-》bar-》foo
    //因此当前调用位置在bar中
    console.log("foo");
}
baz();//<---baz的调用位置

注意我们是如何分析出真正的调用位置的,因为它决定了this得绑定。

你可以把调用栈想象成一个函数调用链,就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具,其中包含javascript调试器。就本例来说,你可以在工具中给foo函数的第一行代码设置一个断点,或者直接在第一行代码之前插入一条debugger语句。运行代码是,调试器会在那个位置暂停,同时会展示当前函数调用列表,这就是你的调用栈。因此,如果你想要分析this的绑定,使用开发者工具得到调用栈,然后找到栈中第二个元素,这就是真正的调用位置。

绑定规则

1默认绑定

首先思考一下代码:
<pre>
function foo(){
console.log(this.a);
}
var a = 2;
foo();
</pre>
声明在全局作用域中的变量就是对全局对象的一个同名属性。它们本质就是同一个东西。并不是通过复制得到的,就像一个硬币的两面一样。
接下来我们可以看到在调用foo 的时候this.a。 被解析成了全局变量a。为什么?因为本例中,函数调用时,应用了默认绑定(好像废话,怎么知道是默认绑定的?接下来会慢慢道来)因此指向全局对象。
那么怎么知道这里使用了默认绑定呢?可以通过分析调用位置来看看foo()是如何调用的,在代码中,foo()是直接使用不带任何修饰的函数引用调用的,因此只能使用默认绑定无法应用其他规则。
如果使用了use strict模式,那么全局对象则无法使用默认绑定,因此this将会绑定到undefined

function(){
    "use strict"
    console.log(this.a);
}
var a = 2;
foo(); //this is undefined

这里有一个微妙但是非常重要的细节,虽然this的绑定规则完全取决于调用位置,但是只有foo运行在非strict modle下时,默认绑定才能绑定到全局对象。严格模式下与foo的调用位置无关:

function foo (){
    console.log(this.a);
}
var a = 2;
(function(){
    "use strict";
    foo(); //2
})();

通常来说不应该在代码中使用strict mode 和non-strict mode 。整个程序要么严格要么非严格,然而有时候,你可能会用到第三方库,其严格程度和你的代码有所不同,因此一定要注意这类兼容性细节。

2隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含,不过这种说法可能会造成一些误导。

function foo () {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo();//2

首先需要注意的是,foo的调用方式,及其后是如何被当作引用属性添加到obj中的,但是无论是直接在obj中定义还是先定义再添加属性,这个函数严格来说都不属于obj对象。
然而,调用位置会使用obj上下文来引用函数,因此你可以说函数被调用时obj对象拥有或者包含它。
无论你如何称呼这个模式,当foo被调用时,它的落脚点确实指向obj对象,当函数引用上下文时,隐式绑定 规则会把函数调用中的this绑定到这个上下文对象。因为调用foo时this被绑定到obj,因此this.a 和obj.a是一样的。

对象属性引用链中,只有最顶层或者说最后一层会影响调用位置。举例来说。

function foo () {
    console.log( this.a );
}
var obj2 = {
    a: 2,
    foo:foo
};
var obj1 = {
    a:3,
    obj2: obj2
};
obj1.obj2.foo();//2
隐式丢失

一个最常见的this绑定问题就是隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。
思考下面的代码:

function foo () {
    console.log( this.a );
}
var obj = {
    a:2,
    foo:foo
};

var bar = obj.foo;
var a = "oops, global";
bar();//"oops, global"

虽然bar是obj.foo的引用,但是实际上,它引用的是foo函数本身,因此此时的bar() 其实是一个不带任何修饰的函数调用,因此应用了默认的绑定。

一种更微妙,更常见并且更出乎意料的情况发上在传入回调函数时:

function foo(){
    console.log( this.a );
}
function doFoo(fn){
    fn();
}
var obj = {
    a:1,
    foo:foo
};
var a = "b";
doFoo( obj.foo );

参数传递其实就是一种隐式赋值。因此我们传入函数时,也会被隐式赋值,所以结果和上一个例子一样。
如果把函数传入语言内置的函数,而不是传入你自己声明的函数,会发生什么呢?结果是一样的,没有区别。

function foo(){
    console.log( this.a );
}
var obj = {
    a:2,
    foo:foo
}
var a = 3;
setTimeout( obj.foo, 1000); //3;

JavaScript环境中内置的setTimeout()函数实现和下面的代码类似:

function setTimeout(fn, delay){
    fn();
}

就像我们看到的那样,回调函数丢失this,绑定是非常常见的。除此之外,还有一种情况this的行为会出乎我们的意料:调用回调函数的函数可能会修改this。在一些流行的javascript的库中事件处理器通常会把回调函数的this强制绑定到触发事件的DOM元素上。这在一些情况下可能很有用,但是有时会让你感到非常郁闷。
无论哪种情况,this的改变都是意想不到的,实际上你无法控制回调函数的执行方式,因此就没有办法控制会影响绑定的调用位置。

3显式绑定

显式绑定呢,主要就是call和apply这两种方法了。
这两个方法是如何工作的呢?他们第一个参数是一个对象,他们会把这个对象绑定到this,接着在调用函数时指定这个this。因为你可以直接指定this的绑定对象,因此我们称之为显式绑定。
思考下面的代码:

function foo(){
    console.log( this.a );
}   
var obj = {
    a:2
}
foo.call(obj);//2

通过foo.call这个方法我们可以在调用foo时强制把this绑定到obj上。
如果你传入一个原始值,字符串,布尔类型或者数字类型,来当作this的绑定对象,这个原始值会被转换成对象形式,也就是new String new Boolean,或者new Number。这个通常称为装箱。

从this绑定的角度来说,call和apply是一样的,他们的区别体现在其他参数上。

可惜,显式绑定也是无法解决之前提到的绑定丢失的问题。但是显式绑定的一个变形可以解决这个问题。
看下面的代码:

function foo(){
    console.log( this.a );
}    
var obj = {
    a:2
}
var bar = function (){
    foo.call( obj );
}
bar ();//2
setTimeout( bar, 100);//2
bar.call( window );//2

我们来看看这个变种到底是怎么工作的的。我们创建了函数bar,并在内部手动调用foo.call(obj),因此foo的this指向了obj。无论之后如何调用bar,它总会手动在obj上调用foo,这种绑定是一种显式的强制绑定,因此我们称之为硬绑定。
硬绑定的典型应用场景就是创建一个包裹函数,传入所有的参数并返回所收到的所有值:

function foo (something){
    console.log(this.a, somethis);
    return this.a + something;
}
var obj = {
    a:2
}
var bar = function (){
    return foo.apply(obj, arguments);
}
var b = bar(3);//2 3
console.log(b);//5

另一种使用方法是创建一个i可以重复使用的辅助函数:

function foo (something){
    console.log(this.a , something);
    return this.a + something;
}
//简单地辅助绑定函数
function bind(fn, obj){
    return function (){
        return fn.apply( obj, arguments);
    }
}
var obj = {
    a:2
};
var bar = bind(foo, obj);
var b = bar (3);//2 3
console.log(b); //5

由于硬绑定是一种非常常用的模式,所以在ES5中提供了内置的方法,Function.prototype.bind它的用法如下:

function foo(something){
    console.log(this.a, something);
}
var obj = {
    a:2
}
var bar = foo.bind( obj );
var b = bar (3); // 2 3
console.log(b);//5

bind()会返回一个硬编码的新函数,他会把参数设置为this的上下文并调用原始函数。

API调用上下文
第三方库的很多函数以及Javascript语言和宿主环境中许多新的内置函数,都提供了一个可选的参数,通常被称之为“上下文”(content),其作用和bing意义,确保你的回调函数使用指定的this。

function foo (el) {
    console.log(el, this.id);
}
var obj = {
    id:'ids'
};
var list = [1,2,3];
list.forEach(foo, obj);//1 ids 2 ids 3 ids

这些函数实际上是通过call或者apply实现的显式绑定。

5new 绑定

使用new来调用函数的时候,或者说发生构造函数调用时,会自动执行下面的操作。
创建一个全新的对象
这个新对象会被执行[[原型]]连接
这个新对象会绑定到函数调用的this
如果函数没有返回其他对象,那么new表达式中函数会自动返回这个新对象

function foo (a){
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

使用new来调用foo时,我们会构造一个新对象并把它绑定到foo调用中得this上,new 是最后一种可以影响函数调用时this绑定行为的方法,我们称之为new 绑定。

本文很多地方摘自 你不知道的javascript一书中得段落,这本书真的很不错,推荐大家购买。链接:京东 http://item.jd.com/11676671.html 亚马逊 http://www.amazon.cn/%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84JavaScript-%E7%BE%8E-%E8%BE%9B%E6%99%AE%E6%A3%AE/dp/B00W34DZ8K/ref=sr_1_1?ie=UTF8&qid=1438533763&sr=8-1&keywords=%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84javascript

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容