深入理解this对象

this的定义

在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用，下面是一个简单的例子：

function test(){
alert(this == window);
}
test();

code1

有的时候this的使用会让许多人觉得琢磨不定，但是总结一句话就是

谁调用的方法this就是指向谁

下面我们分五个方面来介绍一下this

1.函数调用(指向window)

在我们平时定义一个函数的时候然后在调用它，就是指向的

window

对象,就像上面先定义了一个函数

test

,然后去调用它，其实真正调用test方法的是window对象(在JavaScript中都是

对象.属性/方法

，如果是window对象可以省略)，这时候的this是指向window可以用下面的代码进行尝试:

var a = 'out';
function test(){
alert(this.a);
}
test();  //out
var t = new test();
alert(t.a);// undefined undefined

2.作为构造函数调用

这个是指向的新的对象,其实这个例子在上面已经提出来了，下面只需改动上面的一个地方也就是在test的函数中加上

this.a=a

,输出的结果就不同了，看下面的代码：

var a = 'out';
function test(){
this.a = a;
alert(this.a);
}
test();  //out
var t = new test();
alert(t.a);// out out

第一的对象是指向的window第二个对象是指向t(test的实例化)这个对象

3.作为对象的方法调用

函数还可以作为某个对象的方法调用，这时候

this

就是这个上级的对象，

function test(){
alert(this.x);
}
var o = {};
o.x=1;
o.m=test;
o.m();  //1
//o.m=test();  //undefined

4.作为元素的节点

这次先看代码：

var value = 'nihao';
function f1(){
alert(this.value);
}
var val = document.getElementById('email');
val.onclick=f1;

下面是一行的HTML代码：

<input id="email" type="text" />

在点击

input

之后我们会看到弹出的是我们输入的值，而不是window对象的’nihao’，这是 因为每一个获取的DOM元素也是一个对象；

5.call()和apply()

这两个函数的作用是相同的语法有一点不同；

他的作用是改变函数的调用对象，他的第一个参数就表示改变后的调用这个函数的对象(就是改变使用这个函数对象的this指向)

看下面的代码：

var name="helios";
function setName(addr,weight){
console.log(this.name+'---'+addr+'---'+weight);
console.log('wancheng');
}
var cat = {name:'hei',age:12},
dog = {name:'gou'};
setName.call(dog,'shangsha',32);
setName.apply(cat,['beijing',21]);

call()

方法第一个参数传递的是调用这个方法的对象的this指向(上面的例子就是setName的this指向dog)，后面还可以有多个参数分别是实际参数

apply()

一共能有两个参数第一个参数和

call

方法是一样的，第一个参数是实际参数的数组

非预期效果

this的主要应用前面已经介绍完了，但是在使用this的时候，初学者很容易使用

this

不当，造成非预期效果下面就来说明一下：

var obj={
bar:"yuansu",
foo:function(){
(function(){
alert(this.bar);//这个this指向的window对象 会弹出undefined；
})()
}
}
obj.foo();

这里先要指出一个误区，不是在函数里面定义的函数，this就是指向的上一级函数的this这是不正确的，在函数里面定义的函数也是要看是谁调用的这个函数(方法)this才是谁；在这里并不是obj调用foo里面的匿名函数，实际上是

window

,如果想要达到预期的效果值许改一点代码就可以了，看下面代码：

var obj={
bar:"yuansu",
foo:function(){
var self = this;  //把obj这个对象用self保存下来
(function(){
alert(self.bar);//这里的self就是obj了
})()
}
}
obj.foo();

总结

调用形式	this指向
普通函数	window
构造函数	实例化后的对象
对象的方法	该对象
DOM节点	该节点对象
call或者apply	第一个参数