JavaScript 四种this的取值情况

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

1.构造函数

所谓构造函数就是用来new对象的函数。其实严格来说，所有的函数都可以new一个对象，但是有些函数的定义是为了new一个对象，而有些函数则不是。另外注意，构造函数的函数名第一个字母大写（规则约定）。例如：Object、Array、Function等。

    <script>
            function Foo() {
                this.name = "王福朋";
                this.year = 2019;
                console.log(this);//Object { name: "王福朋", year: 2019 }
            }
            var f1 = new Foo();
            console.log(f1.name);//王福朋
            console.log(f1.year);//2019

    </script>

以上代码中，如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。

注意，以上仅限new Foo()的情况，即Foo函数作为构造函数的情况。如果直接调用Foo函数，而不是new Foo()，情况就大不一样了。

    <script>
            function Foo() {
                this.name = "王福朋";
                this.year = 2019;
                console.log(this);//Window
            }
            Foo();
           
    </script>

这种情况下this是window

2.函数作为对象的一个属性

如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象。

    <script>
           var obg={
               x:10,
               fn:function(){
                   console.log(this);//Object { x: 10, fn: fn() }
                   console.log(this.x);//10
               }
           }
           obg.fn();
           
    </script>

以上代码中，fn不仅作为一个对象的一个属性，而且的确是作为对象的一个属性被调用。结果this就是obj对象。

注意，如果fn函数不作为obj的一个属性被调用，会是什么结果呢？

    <script>
           var obg={
               x:10,
               fn:function(){
                   console.log(this);//Window
                   console.log(this.x);//undefined
               }
           }
           var fn1=obg.fn;
           fn1();
           
    </script>

如上代码，如果fn函数被赋值到了另一个变量中 ，并没有作为obj的一个属性被调用，那么this的值就是window，this.x为undefined。

3.函数用call或者apply调用

当一个函数被call和apply调用时，this的值就取传入的对象的值。

    <script>
           var obg={
               x:10,
               
           }
           function fn(){
                   console.log(this);//Object { x: 10 }
                   console.log(this.x);//10
           }
           fn.call(obg);
           
    </script>

4.全局 & 调用普通函数

在全局环境下，this永远是window，这个应该没有非议。

    <script>
           console.log(this===window);//true
    </script>

普通函数在调用时，其中的this也都是window。

    <script>
        var x = 0;
        function fn() {
            console.log(this);//Window
            console.log(this.x);//0
        }
        fn();

    </script>

不过下面的情况你需要注意一下： 

    <script>
           var obg={
               x:10,
               fn:function(){
                  function f(){
                    console.log(this);//Window
                    console.log(this.x);//undefined
                  }
                  f();
               }
           }
           obg.fn();
           
    </script>

函数f虽然是在obj.fn内部定义的，但是它仍然是一个普通的函数，this仍然指向window。