Javascript的this用法

Posted llx8

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript的this用法相关的知识,希望对你有一定的参考价值。

1.纯粹的函数调用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
        请看下面这段代码,它的运行结果是1-->
    </body>
    <script type="text/javascript">
        function test() {    
            this.x = 1;    
            alert(this.x);  
        }  
        test(); // 1
        //        为了证明this就是全局对象,我对代码做一些改变
        var x = 1;  
        function test() {    
            alert(this.x);  
        }  
        test(); // 1
        //        运行结果还是1。再变一下:
        var x = 1;  
        function test() {    
            this.x = 0;  
        }  
        test();  
        alert(x); //0
    </script>

</html>

2.作为对象方法的调用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--函数还可以作为某个对象的方法调用,这时this就指这个上级对象。-->
    </body>
    <script type="text/javascript">
        function test() {    
            alert(this.x);  
        }  
        var o = {};  
        o.x = 1;  
        o.m = test;  
        o.m(); // 1
    </script>

</html>

3.作为构造函数调用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。-->
    </body>
    <script type="text/javascript">
        function test() {    
            this.x = 1;  
        }  
        var o = new test();  
        alert(o.x); // 1
        //        运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
        var x = 2;  
        function test() {    
            this.x = 1;  
        }  
        var o = new test();  
        alert(x); //2
//        运行结果为2,表明全局变量x的值根本没变
    </script>

</html>

4.apply调用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--apply()是函数对象的一个方法,它的作用是改变函数的调用对象,
        它的第一个参数就表示改变后的调用这个函数的对象。
        因此,this指的就是这第一个参数-->
    </body>
    <script type="text/javascript">
        var x = 0;  
        function test() {    
            alert(this.x);  
        }  
        var o = {};  
        o.x = 1;  
        o.m = test;  
        o.m.apply(); //0
        
//        apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
//        如果把最后一行代码修改为
         o.m.apply(o); //1
//        运行结果就变成了1,证明了这时this代表的是对象o。
    </script>

</html>

 

apply调用拓展

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        var x = 0;  
        function test() {    
            alert(this.x);  
            return x
        }  
        var o = {};  
        o.x = 1;  
        o.m = test;  
        o.m.apply(); //0
        alert(o.m())//1 & undefine
        //加上return x后变成 //1 & 0
    </script>

</html>

this在nodejs中的指向

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
//        上面这些规则在Nodejs上面好像不怎么准确。
//        比如:
        var x = 1;
        function test() {
            console.log(this.x);
        }
        test(); //不是1,因为nodejs没有全局这个概念,在一个js文件里,
//        最上层的对象不是全局对象,而是对应于这个文件的module对象。所以在nodejs里面上面的规则就不适应了。
    </script>

</html>

函数调用1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        function test() {    
            this.x = 1;    
            alert(this.x);  
        }  
        test(); // 1
        alert(window.x)//1
    </script>

</html>

函数调用2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        var x = 1;  
        function test() {    
            alert(this.x);  
        }  
        test(); // 1
    </script>

</html>

函数调用3

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        var x = 1;  
        function test() {    
            this.x = 0;  
        }  
        test();  
        alert(x); //0
    </script>

</html>

对象方法的调用1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        function test() {    
            alert(this.x);  
        }  
        var o = {};  
        o.x = 1;  
        o.m = test;  
        o.m(); // 1
//        这里的this指向上级调用的这个对象
    </script>

</html>

构造函数调用1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        function test() {    
            this.x = 1;  
        }  
        var o = new test();  
        alert(o.x); // 1
        这里的this指向新的实例对象o
    </script>

</html>

构造函数调用2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script type="text/javascript">
        var x = 2;  
        function test() {    
            this.x = 1;  
        }  
        var o = new test();
        o.x = 3;
        alert(o.x)  
        alert(x); //2
//        这里的this指向实例对象,全局属性x没有被改变
    </script>

</html>

概念

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--this是Javascript语言的一个关键字。
        它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,-->
    </body>
    <script type="text/javascript">
        function test() {    
            this.x = 1;  
        }
    </script>
    <!--随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,
    那就是this指的是,调用函数的那个对象。-->

</html>

GitHub地址:https://github.com/lianglixiong

 

以上是关于Javascript的this用法的主要内容,如果未能解决你的问题,请参考以下文章

sublime text 3 添加 javascript 代码片段 ( snippet )

Javascript的this用法

js下的this都有哪些用法

Javascript this用法

javascript关于this的用法

Javascript的this用法