深入理解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


猜你喜欢

转载自blog.csdn.net/fengsuiyingdong/article/details/67644960