this是JavaScript语言中的关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。简单的说this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象,这在编写面向对象的JavaScript编程中起到重要作用。
下面有四种不同的调用方式的情况。
第一种:作为函数调用
- function test(){
- this.a=1;
- alert(this.a);
- }
- test(); //弹出1
再次改变。
- var a=1;
- function test(){
- alert(this.a);
- }
- test();
深层次进行改变。
- var a=2;
- function test(){
- this.a=1;
- }
- alert(a); //弹出2
- test();
- alert(a); //弹出1
这里先设置了一个test函数,当执行 test() 时,函数体内的this被绑定到全局对象,接下来执行赋值语句,所以会弹出a的值为1。
第二种:作为对象方法调用
- var test={};
- test.a=1;
- test.b=function{
- alert(this.a);
- }<pre name="code" class="html">test.b();
这里先设置了一个test对象,给对象添加了两个属性,当执行 test.b() 时,函数体内的指的是test对象,所以会弹出test对象中的a的值为1。
- function test(){
- alert(this.a);
- }
- var test2={};
- test2.a=1;
- test2.b=test;
- test2.b();
这里先设置了test函数和test2对象,给test2对象里设置两个属性,赋予a属性一个值,赋予b属性一个test函数,当执行 test2.b() 时,test2.b函数体内的指的是test2对象,所以会弹出test对象中的a的值为1。
第三种:作为构造函数调用
- function test(){
- this.a=1;
- }
- var test2=new test();
- alert(test2.a); //弹出1
所谓构造函数,就是通过new一个函数生成新的一个对象。当生成出test2对象,this就指向test2对象,所以结果为2。
将代码稍作改变,表明this不是全局对象,对全局对象没有任何影响。
- var a=2;
- function test(){
- this.a=1;
- }
- var test2=new test();
- alert(a); //弹出2
第四种:使用apply或者call调用
在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。注意apply()或者call()参数为空时,默认调用全局对象。
- var a=0;
- function test(){
- alert(this.a);
- }
- var test2={};
- test2.a=1;
- test2.b=test;
- test2.b.apply(); //弹出0
由于apply()参数为空,this指的是全局对象。若把最后一行代码修改为
- test2.b.apply(test2);
此时this指向的就是对象test2。
扩充内容:
函数的执行环境
JavaScript 中的函数既可以被当作普通函数执行,也可以作为对象的方法执行,这是 this 含义如此丰富的主要原因。
一个函数被执行时,会创建一个执行环境(ExecutionContext),函数的所有的行为均发生在此执行环境中,构建该执行环境时,JavaScript 首先会创建 arguments
变量,其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量,首先初始化函数的形参表,值为 arguments
变量中对应的值,如果 arguments
变量中没有对应值,则该形参初始化为 undefined
。如果该函数中含有内部函数,则初始化这些内部函数。如果没有,继续初始化该函数内定义的局部变量,需要注意的是此时这些变量初始化为 undefined
,其赋值操作在执行环境(ExecutionContext)创建成功后,函数执行时才会执行,这点对于我们理解 JavaScript 中的变量作用域非常重要,我们先不在这里讨论这个话题。最后为 this
变量赋值,如前所述,会根据函数调用方式的不同,赋给 this
全局对象,当前对象等。至此函数的执行环境(ExecutionContext)创建成功,函数开始逐行执行,所需变量均从之前构建好的执行环境(ExecutionContext)中读取。
Function.bind
- button.onclick = myObject.handler;
为了避免这种错误,许多 JavaScript 框架都提供了手动绑定 this 的方法。在ES5中,已经提供了内置的 bind 方法供大家使用。
- fun.bind(thisArg[, arg1[, arg2[, ...]]])
例如:
- var obj = {name:'JSLite.io'};
- /**
- * 给document添加click事件监听,并绑定EventClick函数
- * 通过bind方法设置EventClick的this为obj,并传递参数p1,p2
- */
- document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
- //当点击网页时触发并执行
- function EventClick(a,b){
- console.log(
- this.name, //JSLite.io
- a, //p1
- b //p2
- )
- }
- // JSLite.io p1 p2
当点击网页时,EventClick被触发执行,输出JSLite.io p1 p2, 说明EventClick中的this被bind改变成了obj对象。如果你将EventClick.bind(obj,'p1','p2') 变成 EventClick.call(obj,'p1','p2') 的话,页面会直接输出 JSLite.io p1 p2。
eval 方法
JavaScript 中的 eval 方法可以将字符串转换为 JavaScript 代码,使用 eval 方法时,调用者的执行环境(ExecutionContext)中的 this 就被 eval 方法继承下来了。