this没那么复杂，其实this指向的就是他的父级obj

 

比如：

1. 

console.log(this);

在浏览器中打印出来的就是windows对象，没什么疑问

 

2.

function test(){

    var a = 1;

    console.log(this.a); 

}

test()

打印出的也是windows对象，因为test function 的上层对象是windows

 

3.

var obj = {

    a: 1,

    b: function () {

        console.log(this);

    },

    c : {

        c1: 123,

        a: 'xx',

        c2: function() {console.log(this);}

    }

}

 

obj.b();   //打印的是obj对象，因为obj.b的上层对象是obj

obj.c.c2();  //打印出的是obj.c对象,因为obj.c.c2的上层对象是obj.c

 

4. 

          

var obj = {

    a: 1,

    b: function () {

        console.log(this);

    },

    c : {

        c1: 123,

        a: 'xx',

        c2: function() {

            console.log(this);

            function test(){

                console.log('test',this);

            }

            test();

        }

    }

}

内部函数这种情况比较特殊，test function 的this指向全局，因为test在运行时才能执行，绑定的对象不可预测，丢失了上层对象

一般来说，如果想获取上层对象，可以使用that的方式，var that = this.保存上层对象

 

 

5.

     

　　this 除了默认绑定到上层对象，也可以手动的进行对象绑定     

var fn = function(){

    console.log(this)

}.bind({a:1})

 

fn();

 

打印出来的this就是{a:1},注意，使用bind之后，apply/call方法就不能生效了

 

6.

        this还可以在运行时绑定上下文：即this

        var  fn = function() {

            console.log(this);

        }

        fn.call({a:1});

        fn.apply({a:1});

         

 

 

所以javascript 中的 this没那么复杂，左绕右绕，其实就是指向父级obj，找不到就绑定顶级的windows，或者手动绑定

 

 

看图说话