JS中this指向详细介绍(含案例)

JavaScript中this作用很大不仅一部分简化了代码更加使得函数功能更加强大，小编今天根据案例好好提及一下该知识点。小编这一段知识点都是有联系的如果有需要大家可以从前面几篇了解起。

一、this指向总结

1.全局中指向window

2.函数预编译过程时指向window

3.call apply改变this指向（在上一篇博客中详细提及了他们两个的作用今天就不包含在实际案例之中）

4.对象调用方法this的指向

二、实例

那么小编直接以一个案例来包含上述所有的点：

        var name= "222";
        var a = {
            name : "111",
            say : function(){
                console.log(this.name);
            }
        }
        var fun = a.say;
        fun();  
        a.say();  
        var b ={
            name : "333",
            say : function(fun){
                fun();     
            }
        }
        b.say(a.say);
        b.say = a.say;
        b.say(); 

按照之前所总结的很显然222、111、222、333。

疑惑点：b.say(a.say);

顾名思义问题大家都能出在这个地方，这句语句相当于实现了把a中的方法放到b的say方法中调用，注意调用二字，b中say方法执行时只是在全局中执行了fun函数，而不是说b对象运行了fun函数中的代码。所以结果是222。

三、补充

this在考察时我们要区分在函数定义和构造函数之中this指向，这点也是this的一个疑难点小编以另外一个案例来讲解这一点如下:

        var a=5;
        function test(){
            console.log(a);
            a=0;
            console.log(this.a);
            var a;
            console.log(a);
        }

问：执行test( ) 和 new test( )结果分别是什么？（一个很明显考察函数定义与构造函数的区别）

1.执行test( )时：

undefined、5、0

2.执行 new test( )时：

undefined、undefined、0

这边又再次复习了一下与预编译的实现实现1时，函数中预编译环节this指向window所以输出5

执行2时，之前提及过构造函数生成对象时函数中会生成一个空的this对象(构造函数那篇有详细说明)，那么这一次函数中this指向的是函数中的那个空this所以返回undefined。