Javascript的this用法

標籤：參數   head   htm   pre   nod   script   第一個   bsp   apply   

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用法