小谈JavaScript中this的用法

　　"this"关键字是JavaScript中广泛应用的一种特性，但它经常也是这门语言中最容易混淆和误解的特性。那么"this"的实际意义是什么？它是如何求值的？

　　这里我把 this 出现的场景分为四类，简单的说就是：

　　　　• 普通函数调用

　　　　• 作为方法来调用

　　　　• 作为构造函数来调用

　　　　• 通过 apply 或 call 方法来调用　

　　下面我们分别举例说明一下：

　　1）作为普通函数调用时

<script type="text/javascript">
    function first(){
            this.a="100";
            console.log(this); //输出window
            console.log(this.a); //输出100
        }   
    first();
</script>

在这段代码中函数first作为普通函数调用，实际上first是作为全局对象window的一个方法来进行调用的,即window.first();

所以这个地方是window对象调用了first方法,那么函数first当中的this即指window,同时window还拥有了另外一个属性a,值为100.

<script type="text/javascript">
    var a=100;
        function first(){
            console.log(this.a);
        }
        first(); //输出100
</script>

同样这个地方first作为window的方法来调用，在代码的一开始定义了一个全局变量a，值为100

它相当于window的一个属性,即window.a=100,又因为在调用first的时候this是指向window的，因此这里会输出100

　　2）作为方法来调用时

<script type="text/javascript">
       var a = 100;
        var obj = {
            a:100,
            b:function(){
                    console.log(this.a);
            }
        }
        obj.b();  //输出  100
//这里是obj对象调用b方法，很显然this关键字是指向obj对象的，所以会输出a

</script>

　　这种情况非常容易理解，b( ) 属于对象 obj，并由 obj进行调用，当执行 obj.b( ) 时，函数是作为对象obj的方法调用的，因此函数体内的this指向的是obj对象，所以会输出100。

　　再换种形式：

<script type="text/javascript">
    var obj1 = {
            a:100,
            b:function(){
                console.log(this.a);
           }
    }
    var obj2 = {
            a:100,
            c:first.b
    }
    obj2.c();  //输出 100
</script>

　　这个例子中，虽然b方法是在obj1这个对象中定义，但是调用的时候却是在obj2这个对象中调用，因此this对象指向obj2

　　3）作为构造函数来调用

　　先来科普一下构造函数，官方解释为：使自己的对象多次复制，同时实例根据设置的访问等级可以访问其内部的属性和方法。当对象被实例化后，构造函数会立即执行它所包含的任何代码。总与new运算符一起使用在创建对象的语句中。

　　简而言之，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。　　

<script type="text/javascript">
        var a = 2;
　　        function test(){
　　　　        this.a = 1;
　　        }
　　        var o = new test();
　　        console.log(a); //输出结果为 2
    console.log(o.a) //输出结果为 1
</script>

　　结果很显然，this指代的就是新对象new test( )。

　　4）通过 apply 方法来调用

<script type="text/javascript">
    var a = 0; 
    function test() { 
        console.log(this.a); 
    } 
    var o = {}; 
    o.a = 1; 
    o.b = test; 
    o.b.apply(); //输出结果为 0 
    o.b.apply(o);//输出结果为 1 
</script>

　　当apply没有参数时，表示为全局对象。所以值为0。

　　当给了参数之后，结果变为了1，说明这是this代表的是对象o

　　以上就是今天的内容了，

　　大家在这里需要注意的是要能够理清 this 所引用的对象到底是哪一个。

　　但是不管按那种方法来调用，请记住一点：谁调用这个函数或方法，this关键字就指向谁。

posted @ 2017-01-20 17:39 欣欣老师带我飞阅读(130) 评论(0) 编辑收藏举报

欣欣老师带我飞

小谈JavaScript中this的用法

公告