javascript函数的4种调用方式与this的指向

<script type="text/javascript">
    console.log(this === window);//true  全局环境中，this默认指向到window

    function abc(){
        console.log(this === window);
    }
    abc();//true   函数abc独立调用（不论这个函数在哪调用），this默认指向到window
    function outer(){
        function inner(){
            console.log(this === window);
        }
        inner();
    }
    outer();//true  函数inner独立调用（不论这个函数在哪调用），this默认指向到window

    var o = {
        m: function(){
            return this;
        },
        n: function(){
            function test(){
                return this;
            }
            return test(); //函数test独立调用（不论这个函数在哪调用），this默认指向到window
        }
    };
    console.log(o.m());//Object o{...}  当函数被作为对象的方法（对象的一个属性）运行时,this指向该对象
    console.log(o.n());//Window{...}  函数test独立调用，this默认指向到window
</script>

<script type="text/javascript">
    var o = {
        a: 1,
        m: function(){
            return this;
        },
        n: function(){
            this.a = 2; 
            //当函数被作为对象的方法调用时，可以使用this访问自己所属的对象，所以它能从对象中取值或对对象进行修改。
            //this到对象的绑定发生在调用的时候。所以这里的函数 n 如果没有调用过，那么外部的 a 是不会被改变的
        }
    };
    console.log(o.m().a);//1
    o.n();
    console.log(o.m().a);//2
</script>

<script type="text/javascript">
    var o = {
        m: function(){
            console.log(this); //{} 当函数被作为对象的方法（对象的一个属性）运行时,this指向该对象
        },
        n: function(){
            console.log(this);//{}

            var that = this;  
            //如果想访问这个外部函数的this值，需要将this的值保存在一个变量里，内部函数就可以通过作用域链找到这个变量。

            function test(){
                console.log(this);//window
                console.log(that);//{}
            }
            return test(); //函数test独立调用（不论这个函数在哪调用），this默认指向到window
        }
    };
    o.m();
    o.n();
</script>

<script type="text/javascript">
    // 创建一个名为Person 的构造函数，它构造一个带有user 和age 的对象
    var Person = function (user,age) {
        this.user = user;
        this.age = age; 
    };

    // 构造一个Person 实例 ，并测试
    var shane = new Person ('shane',25);
    console.log(shane.user);//shane
    console.log(shane.age);//25
</script>

<script type="text/javascript">
    var Person = function(){
        this.user = 'shane';
        return 
    }
    var shane = new Person;
    console.log(shane.user);//shane   return没有返回值，this还是指向实例（新对象），调用结果也还是新对象；

    var Color = function(){
        this.red = 'red';
        return 'hello world';
    }
    var redColor = new Color;
    console.log(redColor.red);//red   return返回的是一个基本类型的字符串（原始值），this还是指向实例（新对象），调用结果也还是新对象；

    var Size = function(){
        this.size = 'big';
        return {};
    }
    var sizeBig = new Size;
    console.log(sizeBig.size);//undefined   return返回的是一个对象，this就指向这个返回的对象，调用结果就是这个返回的对象；
</script>

<script type="text/javascript">
    var add = function (a,b) {
        return a+b;
    }; 

    var arr = [2,3];

    var sum0 = add.apply(null, arr);//apply后面的参数以数组的形式传入
    var sum1 = add.call(null,arr[0],arr[1]);//call后面的参数用逗号隔开
    var sum2 = add.bind(null,arr[0],arr[1]);//bind后面的参数可以和call一样，用逗号隔开
    var sum3 = add.bind(null); //bind调用的时候也可以在执行的时候传参

    console.log(sum0);//5
    console.log(sum1);//5
    console.log(sum2);//function (a,b) {return a+b;};    bind只是返回函数，还未调用，
    console.log(sum2());//5   所以bind调用的时候，如果要执行还得在后面加个（）
    console.log(sum3(arr[0],arr[1]));//5   bind调用的时候也可以在执行的时候传参
</script>

<script type="text/javascript">
    'use strict' //严格模式
    function a(){
        console.log (this);  
    }
    a();//undefined
    //在严格模式下，未指定环境对象而调用函数，则 this 值不会转型为 window , this 值将是 undefined。 
    //除非明确把函数添加到某个对象或者调用 apply()或 call()使用对象冒充。

    window.a();//window
    //所以我们可以手动添加 window.函数（），来改变this指向window

    (function(){
        console.log(this);//undefined
    })();

    setTimeout(function(){
        console.log(this);//Window
    },0);
    //setTimeout是window的一个方法(属性)，所以这里可以写成window.setTimeout
//所以不管是严格模式还是非严格模式，setTimeout里的this始终指向window
//但是有时候我们会发现setTimeout中的this也有其他情况，这只是误导，当然如果你不确定的话，直接console.log(this)一下，分分钟解决
</script>