首页 > Web开发 > 详细

js this详解

时间:2016-03-07 16:47:52      阅读:600      评论:0      收藏:0      [点我收藏+]

  this是js中的一个难点,但同时也是里面非常有价值的东西。

  首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。  

    var a="DJL箫氏";
        function test(){
            alert(this);//window
       alert(this.a);//DJL箫氏 } test();

  很明显这个this会指向window,因为this只会出现在5中情况中。

  1  在全局中使用 this指向全局对象 

alert(this)  //window

  2 在函数中使用   this也指向全局对象 

    function test(){
            alert(this);//window    
        }
        test();

  3  方法调用  其实就是对象调用方法,方法中的this指向调用它的对象

    var test={
            a:"DJL箫氏",
            demo:function(){
                alert(this.a);//DJL箫氏
            }
        }
        
        test.demo();

  4  构造函数

    function Test(){
            this.a="DJL箫氏";
        }
        
        var test= new Test();
        alert(test.a);//DJL箫氏

当使用new关键字将Test实例化后,this就会指向实例化后的对象---test,然后就和对象调用属性一样了。

  5  然后就是经过了call applay  bind方法显示的设置了this,如果有不了解的可以看一下这篇文章

  上面这些主要是参加JavaScript私密花园中this的工作原理

  下面来看一些特殊情况  

     var a="风箫";
        var test={
            a:"DJL箫氏",
            demo:function(){
                alert(this.a);//DJL箫氏
}
}
window.test.demo();

在这里是“DJL箫氏”而不是“风箫”,则说明this总是指向调用它的上一级对象。

        var a="风箫";
        var test={
            //a:"DJL箫氏",
            demo:function(){
                alert(this.a);//undefined
            }
        }
        
        window.test.demo();            

当我们将test对象内部的a属性注释掉时,这是就会得到undefined,这就更加能说明,this只能指向调用它的离它最近的一级对象。

下面如果碰到return呢,其实原理和上面差不多

    function Demo(){
            this.a="DJL箫氏";
            return {};

        //return function b(){}; //undefined
        //return 1; //DJL箫氏
        //return undefined; //DJL箫氏
            //return null; //DJL箫氏

        }
        
        var demo=new Demo();
        alert(demo.a);//undefined

很明显会是undefined,因为你最后返回的对象中没有a这个属性。但是当return的是1、undefined、null时,得到的确是“DJL箫氏”。什么意思呢。

如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

知识点补充:

  1.在严格版中的默认的this不再是window,而是undefined。

  2.new操作符会改变函数this的指向问题,虽然我们上面讲解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下。

  为什么this会指向a?首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

function fn(){
    this.num = 1;
}
var a = new fn();
console.log(a.num); //1

3 在对象的字面声明语法中,this 不能用来指向对象本身。 因此 var obj = {me: this} 中的 me 不会指向obj,因为 this 只可能出现在上述的五种情况中。 这个例子中,如果是在浏览器中运行,obj.me 等于window 对象。

 

附:this中的工作原理  

JavaScript中this指针指向的彻底理解

 

 

  

 

js this详解

原文:http://www.cnblogs.com/djlxs/p/5250827.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!