javascript系列之this

引言

    在这篇文章里我们将会讨论与执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题是足够难的并且在不同的执行上下文中判定this的值经常会引发出许多问题。

     许多编程人员习惯于认为编程语言中的this关键字和面向对象编程时密切相关的,准确的说就是this指向通过构造函数新创建的对象(译者注:c++中this指针只能在一个类的成员函数中调用,它表示当前对象的地址)。在ECMAScript中这个理念也是被实现了的,然而,我们必须要明白,在ECMAScript中它不仅仅局限在指向创建的对象。下面让我们详细看看ECMAScript中确切的this值。

定义

this是执行上下文的一个属性:

1 activeExecutionContext={
2     VO:{...},
3     this:thisValue
4 }

      在这里VO是变量对象,在前面的章节中我们已经讨论过。this与上下文的执行代码类型是直接相关的。一旦进入上下文它的值就被决定了,并且当代码在上下文执行时其值是不可变的。让我们更详细的考虑这些情形。

全局代码中的this值

      在全局代码中,一切事情都是很简单的,this值就是全局对象本身,因此,间接引用this是可能的:

javascript系列之this
1 //全局对象的显式属性定义
2 this.a=10;//global.a=10
3 alert(a);//10
4 //通过对无类型标识符赋值的隐式定义
5 b=20;
6 alert(this.a);//20
7 //通过变量声明隐式定义,因为全局上下文的变量对象就是全局对象自身
8 var c=30;
9 alert(this.c);//30
javascript系列之this
函数代码中的this值

     当this使用在函数代码中事情就变得有趣多了。这种情况是最难的也会引发很多的问题。在函数代码中,this值的第一(可能也是最重要的)特性就是不能 静态的绑定到一个函数上。正如上面已经提到的,this值在进入上下文时就已经被决定了,在函数代码的情形下,每次this值可以是完全不一样的。

      然而,在代码运行时,this值是不可改变的。例如,不能给this赋一个新值,因为this不是变量(相反,python编程语言中,可以显式的定义self对象,在运行的时候self对象可重复改变)

javascript系列之this
 1 var foo={x:10};
 2 var bar={
 3     x:20,
 4     test:function(){
 5         alert(this===bar);//true
 6         alert(this.x);//20
 7         this=foo;//error,不能改变this值
 8         alert(this.x);//如果这里没有错的话,结果会是10,不是20
 9     }
10 };
11 //当进入上下文时,this值由"bar"对象决定的。为什么这样-将在下面详细讨论
12 bar.test();//true,20
13 foo.test=bar.test;
14 //然而,此时在这里的this将指向"foo"-即使我们调用同一个函数
15 foo.test();//false,10
javascript系列之this

     在函数代码中是什么影响了this值的变化?有多方面的因素。

     首先,在一般的函数调用中,this由触发上下文代码的调用者提供。例如,调用函数的父上下文环境。并且this值由调用形式所决定(换句话说,就是由函 数调用的语法形式决定)。为了能够在任何上下文中准确无误的判定this值,必须去理解和记住这一个重要理论。准确的调用形式,例如调用函数的方式,影响 调用上下文的的this值,别无其他了。

(当我们在一些关于javascript 的文章和书本中会看到“this值由函数如何定义来决定:如果是全局函数,this值被设置为全局对象,如果函数时一个对象的方法,this值设置为这个 对象”-这是一个错误的描述)。从下面我们可以看出即使是一般的全局函数,也能够被产生不同this值的调用表达式所触发。

javascript系列之this
1 function foo(){
2     alert(this);
3 }
4 foo();//global
5 alert(foo===foo.prototype.constructor);//true
6 //但是对于同一函数的另一种调用表达式形式,this值是不同的
7 foo.prototype.constructor();//foo.prototype
javascript系列之this

调用一个被定义为对象方法的函数,但是this值不会被设置为这个对象也是同样可能的:

javascript系列之this
 1 var foo={
 2     bar:function(){
 3         alert(this);
 4         alert(this===foo);
 5     }
 6 };
 7 foo.bar();//foo,true
 8 var exampleFunc=foo.bar;
 9 alert(exampleFunc===foo.bar);//true
10 //同一函数的另一种调用表达式形式,得到不同的this值
11 exampleFunc();//global,false
javascript系列之this

      调用形式是如何影响this值了?为了充分理解this值的确定值,必须详细考虑一种内置类型-Reference类型

引用类型

     使用伪代码编程思想。Reference类型的值可以由含两个属性的对象表示:base(例如,属性属于这个对象)和这个base中的属性名:

1 var valueOfReferenceType={
2     base:<base object>,
3     propertyName:<property name>
4 }

Reference类型的值仅仅只有两种情况:

  1. 当我们处理一个标识符时
  2. 或者获取属性

    标识符通过标识符获取进程来处理,这会在第四节:作用域链中详细考虑。在这里我们仅仅关注这里面一直有 Reference类型(对this值是很重要的) 的算法返回情况 。

    标识符是变量名,函数名,函数参数名和全局对象的未声明(译者注:前面没有var)属性名。例如,下面标识符的值: 

1    var foo = 10;
2    function bar() {}

 操作符的中间结果,对应的Reference值如下:

javascript系列之this
1 var fooReference={
2     base;global,
3     propertyName:‘foo‘
4 };
5 var barReference={
6     base:global,
7     propertyName:‘bar‘
8 };
javascript系列之this

为了能够从Reference类型的值中获取一个对象的真实值,这里有一个GetValue方法,在伪代码中描述如下:

javascript系列之this
1    function GetValue(value) {
3      if (Type(value) != Reference) {
4        return value;
5      }     
7      var base = GetBase(value); 
9      if (base === null) {
10        throw new ReferenceError;
11      } 
13      return base.[[Get]](GetPropertyName(value));
15    }
javascript系列之this

内置的[[Get]]方法返回对象属性的真实值,也包括从原型链中解析出的继承属性:

1    GetValue(fooReference); // 10
2    GetValue(barReference); // function object "bar"

我们也知道属性获取有两种方式:点操作符(当属性名是正确的标识符并且已知的),或者用中括号:

1    foo.bar();
2    foo[‘bar‘]();

返回中间计算结果时,我们可以获得Reference类型的值:

javascript系列之this
1    var fooBarReference = {
2      base: foo,
3      propertyName: ‘bar‘
4    };  
6    GetValue(fooBarReference); // function object "bar"
javascript系列之this

    因此,在许多重要的场合,Reference类型的值是如何和函数上下文中的this值关联的?来到本文的重要时刻。在函数上下文中决定this值的一般规则如下:

javascript系列之this
在函数上下文中的this值由调用者提供并由当前的调用表达式形式所决定(这个函数在语法意义上如何书写的)。
如果在调用(...)的左边,有一个Reference类型的值,这样this值被这设置为Reference类型的base对象。
在其他所有的情形(例如与Reference类型不同的任何类型值),this值一直设置为null。但由于this值为null没
有任何意义,它会隐式的转化为全局对象
javascript系列之this

我们看下面的例子:

1 function foo() {
2   return this;
3 }  
5 foo(); // global

我们看到在调用括号的左边是一个引用类型值(因为foo是一个标示符):

1 var fooReference = {
2   base: global,
3   propertyName: ‘foo‘
4 };

相应地,this也设置为引用类型的base对象。即全局对象。同样,使用属性访问器:

javascript系列之this
1 var foo = {
2   bar: function () {
3     return this;
4   }
5 };
6   
7 foo.bar(); // foo
javascript系列之this

同样,我们拥有一个引用类型的值,其base是foo对象,在函数bar激活时将base设置给this。

1 var fooBarReference = {
2   base: foo,
3   propertyName: ‘bar‘
4 };

但是,如果用另一种方式激活相同的函数,this的值将不同。

1 var test = foo.bar;
2 test(); // global

因为test作为标识符,产生了其他引用类型的值,该值的base(全局对象)被设置为this的值。

1 var testReference = {
2   base: global,
3   propertyName: ‘test‘
4 }

现在,我们可以很明确的说,为什么用不同的形式激活同一个函数会产生不同的this,答案在于不同的引用类型(type Reference)的中间值。

javascript系列之this
 1 function foo() {
 2   alert(this);
 3 } 
 5 foo(); // global, because 
 7 var fooReference = {
 8   base: global,
 9   propertyName: ‘foo‘
10 };  
12 alert(foo === foo.prototype.constructor); // true 
14 // another form of the call expression  
16 foo.prototype.constructor(); // foo.prototype, because 
18 var fooPrototypeConstructorReference = {
19   base: foo.prototype,
20   propertyName: ‘constructor‘
21 };
javascript系列之this

另一个通过调用方式动态确定this的值的经典例子:

javascript系列之this
 1 function foo() {
 2   alert(this.bar);
 3 }
 4   
 5 var x = {bar: 10};
 6 var y = {bar: 20};
 7   
 8 x.test = foo;
 9 y.test = foo;
10   
11 x.test(); // 10
12 y.test(); // 20
javascript系列之this
函数调用和非引用类型

    那么,正如我们已经指出,当调用括号的左边不是引用类型而是其它类型,this的值自动设置为null,实际最终this的值被隐式转换为全局对象。让我们思考下面这种函数表达式:

1 (function  () {
2   alert(this); // null => global
3 })();

     在这个例子中,我们有一个函数对象但不是引用类型的对象(因为它不是标示符,也不是属性访问器),相应地,this的值最终被设为全局对象。更多复杂的例子:

javascript系列之this
 1 var foo = {
 2   bar: function () {
 3     alert(this);
 4   }
 5 };
 6   
 7 foo.bar(); // Reference, OK => foo
 8 (foo.bar)(); // Reference, OK => foo
 9   
10 (foo.bar = foo.bar)(); // global?
11 (false || foo.bar)(); // global?
12 (foo.bar, foo.bar)(); // global?
javascript系列之this

   那么,为什么我们有一个属性访问器,它的中间值应该为引用类型的值,但是在某些调用中我们得到this的值不是base对象,而是global对象?问题出现在后面的三个调用,在执行一定的操作运算之后,在调用括号的左边的值不再是引用类型。

第一个例子很明显———明显的引用类型,结果是,this为base对象,即foo。

在 第二个例子中,分组操作符(译者注:这里的分组操作符就是指foo.bar外面的括号"()")没有实际意义,想想上面提到的,从引用类型中获得一个对象 真正的值的方法,如GetValue 。相应的,在分组操作的返回值中——我们得到的仍是一个引用类型。这就是this的值为什么再次被设为base对象,即 foo。

第三个例子中,与分组操作符不同,赋值操作符调用了GetValue方法。返回的结果已经是函数对象(不是引用类型),这意味着this的值被设为null,实际最终结果是被设置为global对象。

第四个和第五个也是一样——逗号操作符和逻辑操作符(OR)调用了GetValue 方法,相应地,我们失去了引用类型的值而得到了函数类型的值,所以this的值再次被设为global对象。

引用类型和this为null

    有一种情况,如果调用方式确定了引用类型的值,不管怎样,只要this的值被设置为null,其最终就会被隐式转换成global。当引用类型值的 base对象是激活对象时,就会导致这种情况。下面的实例中,内部函数被父函数调用,此时我们就能够看到上面说的那种特殊情况。正如我们在 第二章学到的一样,局部变量、内部函数、形式参数都储存在给定函数的活动对象中。

javascript系列之this
1 function foo() {
2   function bar() {
3     alert(this); // global
4   }
5   bar(); // the same as AO.bar()
6 }
javascript系列之this

    激活对象总是作为this的值返回——null(即伪代码AO.bar()相当于null.bar())。这里我们再次回到上面描述的情况,this的值最终还是被设置为全局对象。

    有一种情况除外:“在with语句中调用函数,且在with对象(译者注:即下面例子中的__withObject)中包含函数名属性时”。 with语句将其对象添加在作用域链最前端,即在激活对象的前面。那么对应的,引用类型有值(通过标识符或属性访问器),其base对象不再是激活对象, 而是with语句的对象。顺便提一句,这种情况不仅跟内部函数相关,还跟全局函数相关,因为with对象比作用域链里的最前端的对象(全局对象或一个激活 对象)还要靠前。

javascript系列之this
 1 var x = 10;
 2   
 3 with ({
 4   
 5   foo: function () {
 6     alert(this.x);
 7   },
 8   x: 20
 9   
10 }) {
11   
12   foo(); // 20
13   
14 }
15   
16 // because
17   
18 var  fooReference = {
19   base: __withObject,
20   propertyName: ‘foo‘
21 };
javascript系列之this

    在catch语句的实际参数中的函数调用存在类似情况:在这种情况下,catch对象被添加到作用域的最前端,即在激活对象或全局对象的前面。但 是,这个特定的行为被确认为是ECMA-262-3的一个bug,这个在新版的ECMA-262-5中修复了。修复后,在特定的激活对象中,this指向 全局对象。而不是catch对象。

javascript系列之this
 1 try {
 2   throw function () {
 3     alert(this);
 4   };
 5 } catch (e) {
 6   e(); // __catchObject - in ES3, global - fixed in ES5
 7 }
 8   
 9 // on idea
10   
11 var eReference = {
12   base: __catchObject,
13   propertyName: ‘e‘
14 };
15   
16 // but, as this is a bug
17 // then this value is forced to global
18 // null => global
19   
20 var eReference = {
21   base: global,
22   propertyName: ‘e‘
23 };
javascript系列之this

    同样的情况出现的命名函数(函数的更多细节参考Chapter 5. Functions)的递归调用中。在函数的第一次调用中,base对象是父激活对象(或全局对象),在递归调用中,base对象应该是存储着函数表达式可选名称的特定对象。但是,在这种情况下,this的值也总是被设置为global。

javascript系列之this
1 (function  foo(bar) {
2   
3   alert(this);
4   
5   !bar && foo(1); // "should" be special object, but always (correct) global
6   
7 })(); // global

javascript系列之this
构造函数中的this

 

     还有一个在函数的上下文中与this的值相关的情况是:函数作为构造器调用时。

javascript系列之this
1 function A() {
2   alert(this); // newly created object, below - "a" object
3   this.x = 10;
4 }
5   
6 var a = new A();
7 alert(a.x); // 10
javascript系列之this

在这个例子中,new操作符调用“A”函数内部的[[Construct]]方法,接着,在对象创建后,调用其内部的[[Call]]方法,所有相同的函数“A”都将this的值设置为新创建的对象。

手动设置函数调用的this值

 

    在Function.prototype中定义了两个方法允许手动设置函数调用时this的值,它们是apply和call方法(所有的函数都 可以访问它们)。它们用接受的第一个参数作为this的值,this在调用的作用域中使用。这两个方法的区别不大,对于apply,第二个参数必须是数组 (或者是类似数组的对象,如arguments,相反,call能接受任何参数。两个方法必须的参数都是第一个参数值—this。

例如:

javascript系列之this
 1 var b = 10;
 3 function a(c) {
 4   alert(this.b);
 5   alert(c);
 6 }  
 8 a(20); // this === global, this.b == 10, c == 20
10 a.call({b: 20}, 30); // this === {b: 20}, this.b == 20, c == 30
11 a.apply({b: 30}, [40]) // this === {b: 30}, this.b == 30, c == 40
javascript系列之this
总结

    在这篇文章中我们讨论了ECMAScript中this值的特性(和 c++/java中确实不同的)。我希望这篇文章能帮助你更准确的理解ECMAScript中this关键字是如何工作的。

 

javascript系列之this,布布扣,bubuko.com

javascript系列之this

上一篇:Java判断IP地址类型(第二版)


下一篇:[Android学习笔记五] Android View和Widget类图