JavaScript全面了解作用域(基础、this、闭包、继承)之二

来源:未知 责任编辑:智问网络 发表时间:2013-11-08 08:46 点击:

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,一步一步踏实走出来

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1