首页 > 代码库 > 对javascript this的理解
对javascript this的理解
对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下
首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的时候会激活一个上下文,关于上下文的介绍,参考《对javascript执行上下文的理解》一文。
this的几种使用场景:
一 、全局代码中的this
在全局的上下文中,this始终是全局对象本身,看代码:
this.a = 10;alert(window.a);//10b = 20;alert(this.b);//20var c = 30;alert(this.c);//30
二、function中的this
要彻底理解function,应该明白this的赋值原理,讲this赋值之前,先来看一下javascript的引用类型(reference type), 引用类型的值可以看作一个对象,包含两个属性,propertyName 标识属性的值,base标识该属性的拥有者,
{ base : <base object>, propertyName : <property name>}
javascript处理引用类型的值只可能有两种情况:① 处理一个标识符 ②属性访问符
先看标识符,把标识符处理成引用类型包含 声明变量,函数名,形参和全局对象中未识别的属性名
如下
var foo = 10;function bar(){}
操作的中间结果中,引用类型的值分别被处理成如下所示:
var fooReference = { base: global, propertyName: ‘foo‘}; var barReference = { base: global, propertyName: ‘bar‘};
属性访问器都应该熟悉。它有两种变体:点(.)语法(此时属性名是正确的标示符,且事先知道),或括号语法([])
var foo = { bar : function(){}}
foo.bar();
foo[‘bar‘]();
在中间计算的返回值中,我们有了引用类型的值。
var fooBarReference = {
base: foo,
propertyName: ‘bar‘
};
那么引用类型和this的赋值有什么关系呢,在javascript中,一个函数上下文中确定this值的通用规则如下:
在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。
#demo1
function foo(){ alert(this);}foo();//this-> global
上面提到,标识符包含函数名,即foo被当成引用类型的值来处理,处理过程中值为
var fooBarReference = { base: global, propertyName: ‘foo‘};
所以执行上下文中的this被赋值为global
#demo2
var foo = { bar : function(){ alert(this); }}foo.bar();//this->foo
demo2中方法调用属于属性访问器的方式,base被置为foo
#demo3 看一个调用方式,
var name ="i am from window";var foo = { name : "i am in foo", getName : function(){ alert(this.name); }}var bar = foo.getName;bar();//i am from windowfoo.getName();//i am in foo
bar属于标识符,解析成引用类型的值后base为global,foo.getName属性访问器访问方式调用方法,base 为foo,为什么用表达式的不同形式激活同一个函数会不同的this值,答案在于引用类型(type Reference)不同的中间值
三、函数调用和非引用类型
当调用括号的左边不是引用类型而是其它类型,这个值自动设置为null,结果为全局对象
(function () { alert(this); // null => global})();
在这个例子中,我们有一个函数对象但不是引用类型的对象(它不是标示符,也不是属性访问器),相应地,this值最终设为全局对象。
四、引用类型和this为null
有一种情况是这样的:当调用表达式限定了call括号左边的引用类型的值, 尽管this被设定为null,但结果被隐式转化成global。当引用类型值的base对象是被活动对象时,这种情况就会出现。
下面的实例中,内部函数被父函数调用,此时我们就能够看到上面说的那种特殊情况。
function foo() { function bar() { alert(this); // global } bar(); // the same as AO.bar()}
活动对象总是作为this返回,值为null——(即伪代码的AO.bar()相当于null.bar())。这里我们再次回到上面描述的例子,this设置为全局对象。
五、构造方法中的this
构造方法中的this比较简单,
function Foo(){ this.a = ‘inner‘; this.getA = function(){ alert(this.a); }}var f1 = new Foo();f1.a;// innerf1.getA();//inner
new Foo()执行的时候,首先先创建一个空对象{},然后把对象作为this传入到构造方法Foo()中执行初始化操作,然后把标识符f1指向该对象。
六、调用函数中手动修改this
在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。
var b = 10; function a(c) { alert(this.b); alert(c);} a(20); // this === global, this.b == 10, c == 20 a.call({b: 20}, 30); // this === {b: 20}, this.b == 20, c == 30a.apply({b: 30}, [40]) // this === {b: 30}, this.b == 30, c == 40