js this详解

　　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只能指向调用它的离它最近的一级对象。

　　　　var Foo={};
　　　　Foo.method = function() {
　　　　　　 // var $this=this;
            function test() {
                // this 将会被设置为全局对象
                alert(this);
　　　　　　　　　　//alert($this);
            }
            test();
        }
        
        Foo.method();

在这里this指向的并不是Foo对象而是window对象，如果要得到Foo对象，我们可以加上上面注释的代码。（这里感觉是最诡异的地方）

下面如果碰到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比较特殊。

　　　　function test(){
            this.a="DJL";
            return function alert1(){
                alert(this);
            }
            
        }

        var b=new test();
        alert(typeof b)  //function
        b();             //window

在这里变量b实际上是一个函数，而调用它的是window对象，所以这个应该是很好理解的。

知识点补充：

　　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指针指向的彻底理解

JavaScript中的this陷阱的最全收集--没有之一

 

------------------------------------------------------补---------------------------------------

Function Invocation Pattern
诸如`foo()`的调用形式被称为Function Invocation Pattern，是函数最直接的使用形式，注意这里的foo是作为单独的变量出现，而不是属性。
在这种模式下，foo函数体中的this永远为Global对象，在浏览器中就是window对象。
Method Invocation Pattern
诸如`foo.bar()`的调用形式被称为Method Invocation Pattern，注意其特点是被调用的函数作为一个对象的属性出现，必然会有“.”或者“[]”这样的关键符号。
在这种模式下，bar函数体中的this永远为“.”或“[”前的那个对象，如上例中就一定是foo对象。
Constructor Pattern
`new foo()`这种形式的调用被称为Constructor Pattern，其关键字`new`就很能说明问题，非常容易识别。
在这种模式下，foo函数内部的this永远是new foo()返回的对象。
Apply Pattern
`foo.call(thisObject)`和`foo.apply(thisObject)`的形式被称为Apply Pattern，使用了内置的`call`和`apply`函数。
在这种模式下，`call`和`apply`的第一个参数就是foo函数体内的this，如果thisObject是`null`或`undefined`，那么会变成Global对象。