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

遇到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还是指向函数的实例。

你可能感兴趣的:(JavaScript)