JavaScript中this的理解

写在前面

这篇文章主要参考以下两篇文章学会js的this和js中this彻底理解

首先，本文讨论的情况都是在一班情况下，并非strict mode，下面进入正题，先熟悉几条原则，后面会有具体实例

几条原则

1. js中this在函数定义的时候是确定不了的，只有在函数运行的时候才能确定
2. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window
3. 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
4. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
5. js中function也是对象，window是全局变量

js中call方法

看以下代码(弹出hello world)

        function hello(con){
            alert(this+" "+con);
        }
        hello.call("hello","world");

分析一下call()的用法

1. 把第二个到左后一个参数当做函数执行时传入的参数

2. 把函数执行时的this指向第一个参数

3. 执行函数

js执行函数的时候会默认执行以上的操作，即执行函数操作fun()相当于执行fun.call(window,p1..)

实例

        function a(){
            var user = "gray";
            alert(this.user); //undefined
            alert(this); //Window
        }
        a();
        //a();相当于window.a(),window中并没有定义user，因此是未定义

        var a= {
            user:"gray",
            fn:function(){
                alert(this.user);//gray
            }
        };
        a.fn();
        //相当于window.a.fn();这里用到了第三条原则，fn被上一级对象a调用，因此this指向的对象a

        var a= {
            user:"gray",
            fn:function(){
                alert(this.user);//undefined
            }
        };
        var b = a.fn;
        b();
        //这里b只是指向a.fn，并没有执行，而this是在执行时才能确定指向的，因此真正执行的b()相当于window.b();this指向window

        var a= {
            user:"gray",
            fn:function(){
                alert(this.user);//undefined
            }
        };
        var b = a.fn;
        b();
        //这里b只是指向a.fn，并没有执行，而this是在执行时才能确定指向的，因此真正执行的b()相当于window.b();this指向window

遇到return

        function fun(){
            this.user = "gray";
            return 1;
        }
        var f = new fun;
        alert(f.user);//gray

        function fun(){
            this.user = "gray";
            return {};
        }
        var f = new fun;
        alert(f.user);//undefined
        //如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。