深入理解this对象

this的定义

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

function test(){
    alert(this == window);
}
test();
 
 
1
2
3
4
 
 
1
2
3
4

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
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

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
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

第一的对象是指向的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
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

4.作为元素的节点

这次先看代码：

        var value = 'nihao';
        function f1(){
            alert(this.value);
        }
        var val = document.getElementById('email');
        val.onclick=f1;
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

下面是一行的HTML代码：

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

在点击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]);
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

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();
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

这里先要指出一个误区，不是在函数里面定义的函数，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();
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

总结

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

参考：

http://blog.csdn.net/woshinannan741/article/details/51146889