JavaScript回调函数中的this

2,651 阅读1分钟

不得不说,js中的this真是一大坑啊,之前写了篇文章,发现还有坑没填完,今天继续填一下。

还是先举个栗子:

var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20

输出的是20,这个例子之前的文章用过了,现在再捡起来用一次。之前的说法是setTimeout会让里面运行的代码,运行在全局对象上面(window对象),这个说法虽然正确,但是并没有说清楚为什么会这样,下面将探讨一下原因:

还是先看个例子:

    var obj={
       a:'1'
   }


    function getA() {
        console.log(this.obj.a);
    }

    var pseudoWindow = {
        obj:{
            a:'2'
        },
        getA: getA,
        getA2: function (callback) {
            callback();
            getA();
            pseudoWindow.getA()
            this.getA()
            this.func = callback;
            this.func();
        }
    }
   
    pseudoWindow.getA2(getA)
    // 1
    // 1
    // 2
    // 2 
    // 2
    

调用了 pseudoWindow.getA2,然后传入了一个函数getA组我诶参数。

callback():函数直接调用,因为callback执行的是全局的getA,所以callback中的this是指全局对象,所以obj拿得到的是1

getA():同上,getA是调用的全局的getA

pseudoWindow.getA():最容易理解的一个,调用的是pseudoWindow中的getA,所以this得指向的是pseudoWindow

this.getA():因为这个this是在方法getA2中,所以指向的是其外层对象,即pseudoWindow,调用的实际上是pseudoWindow.getA()

this.func():同上

规律

所有通过对象调用的方法中的this指向都是根据运行环境而定,所有不通过对象的,this都是指向全局。前者是方法调用,后者是函数调用。

END

JavaScript中的this不得不说,真是一个大坑啊。所以写了两篇小短文,简单总结了一下,如果有误,欢迎指正。