JavaScript全面瞭解範圍（基礎、this、閉包、繼承）之二

this這個東西，確實不好懂，很具有迷惑性，一不小心就錯了。

this代表的是當前的範圍，知道當前的範圍，就可以確定了，但是這不是很容易確定。

第四部分：在全域中使用this

<script> 
        var a = 2; 
        function test(){ 
         
            var a = 1; 
            document.writeln(a); 
            document.writeln(this.a); 
             
        } 
         
        test(); 
        document.write(this.a); 
    </script> 
<script>
        var a = 2;
        function test(){
       
            var a = 1;
            document.writeln(a);
            document.writeln(this.a);
           
        }
       
        test();
        document.write(this.a);
    </script>
你認為結果是什麼呢？1 1 2？但是結果是1 2 2

很有疑問吧？調用這個函數是在window中調用，所以說this就是window，window.a=2。不是this存在test()當中，this就是在test域。

第五部分：在對象中使用this

<script> 
       var name = "JIM"; 
       function Person(){ 
           this.name = "Mike"; 
           this.myname = getName; 
       } 
        
       function getName(){ 
           return this.name; 
       } 
        
       var person = new Person(); 
       document.write(person.myname()); 
   </script> 
 <script>
        var name = "JIM";
        function Person(){
            this.name = "Mike";
            this.myname = getName;
        }
       
        function getName(){
            return this.name;
        }
       
        var person = new Person();
        document.write(person.myname());
    </script>
結果是Mike。this所在的範圍是在person當中，先搜尋其中的屬性，然後搜尋原型，一直找到。

<script> 
        var name = "JIM"; 
        function Person(){ 
            this.myname = getName; 
        } 
        Person.prototype.name="Mike"; 
        function getName(){ 
            return this.name; 
        } 
         
        var person = new Person(); 
        document.write(person.myname()); 
    </script> 
<script>
        var name = "JIM";
        function Person(){
            this.myname = getName;
        }
        Person.prototype.name="Mike";
        function getName(){
            return this.name;
        }
       
        var person = new Person();
        document.write(person.myname());
    </script>
這裡一直搜尋到Person.prototype.name

第五部分：this在繼承當中使用

<script> 
        var name = "JIM"; 
        function Person(){ 
            this.myname = getName; 
            this.name="Mike"; 
        } 
        function Son() 
        { 
            this.name="Sam"; 
        } 
        Son.prototype=new Person(); 
        function getName(){ 
            return this.name; 
        } 
         
        var son = new Son(); 
        document.write(son.myname()); 
    </script> 
<script>
        var name = "JIM";
        function Person(){
            this.myname = getName;
   this.name="Mike";
        }
        function Son()
  {
   this.name="Sam";
  }
  Son.prototype=new Person();
        function getName(){
            return this.name;
        }
       
        var son = new Son();
        document.write(son.myname());
    </script>
結果是Sam，調用者是son，他先找自己的屬性，然後是原型，最後的是原型的原型，一直找到。

第六部分：在回呼函數中使用this

<script> 
        var name = "JIM"; 
        function Person(){ 
            this.name="Mike"; 
        } 
        function getName(){ 
            return this.name; 
        } 
        var person=new Person(); 
        document.writeln(getName.call(person)); 
        document.write(getName.call(this)); 
    </script> 
<script>
        var name = "JIM";
        function Person(){
   this.name="Mike";
        }
        function getName(){
            return this.name;
        }
  var person=new Person();
  document.writeln(getName.call(person));
        document.write(getName.call(this));
    </script>

結果是Mike JIM。第一個相當於person在調用，搜尋他的範圍。第二個是window在調用，搜尋window範圍。

第七部分：在閉包中使用this

下面的例子也許你會喜歡的，為什麼呢？

<script> 
        var name = "JIM"; 
        function Person(){ 
            this.name = "Mike"; 
            this.getName = function(){ 
                return function(){ 
                    return this.name; 
                }; 
            }; 
        } 
         
        var person = new Person(); 
        document.write(person.getName()()); 
    </script> 
<script>
        var name = "JIM";
        function Person(){
            this.name = "Mike";
            this.getName = function(){
                return function(){
                    return this.name;
                };
            };
        }
       
        var person = new Person();
        document.write(person.getName()());
    </script>
結果你以為是Mike，但是你錯了，結果是JIM。

我來分析一下吧。this不會儲存在範圍鏈的。我們把person.getName()分一下。

var temp=person.getName(); 
        document.write(temp()); 
var temp=person.getName();
        document.write(temp());
person.getName()返回的是一個函數，他可以儲存其他的範圍鏈，this不儲存，第一步僅僅是返回了一個函數，他的結果是什麼，還得繼續看，調用的位置。這裡是window，當然是JIM啦。 www.2cto.com

我們現在可以總結一下，關於this在函數當中的使用方式。誰調用他，this就指向誰，就搜尋他的範圍。

這下子，就完全明了了，this到底怎麼使用了，他指向的是誰。

 摘自 WebGIS，一步一步踏實走出來