JavaScript 中的 this 指向问题

this的指向:

es5 中,this 的指向并不是在创建的时候就可以确定的, this 永远指向最后调用它的那个对象

   var name = "windowsName";
   function a() {
       var name = "Cherry";

       console.log(this.name);          // windowsName

       console.log("inner:" + this);    // inner: Window
   }
   a();

注:这里的 a(),就相当于 window.a();所以最后 this 的指向始终是 window 对象。

var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    a.fn();

注:在这个例子中,函数 fn 是对象 a 调用的,所以打印的值就是 a 中的 name 的值。

var name = "windowsName";
    var a = {
        name: "Cherry",     // 如果这里注释掉,this.name 就会返回 undefined。
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    window.a.fn();

注:this 永远指向最后调用它的那个对象,所以这里 this 仍然指向 a 对象。

    var name = "windowsName";
    var a = {
        name : null,
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // windowsName
        }
    }

    var f = a.fn;
    f();

注:fn 虽然被赋值给 a 对象了, 但是并没有被调用, 最后仍然是被 window 调用的。所以 this 指向的也就是 window。

怎么改变 this 的指向:

  1. 使用箭头函数。
  2. 在函数内部使用_this = this。
  3. 使用 apply、call、bind。
  4. new 实例化一个对象。
    var name = "windowsName";

    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)     
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            },100);
        }
    };

    a.func2()     // this.func1 is not a function

注:因为这里的 setTimeout() 函数内,this 指向的是 window,而 window 对象是不包含 func1。

箭头函数的 this

箭头函数的 this 始终指向函数定义时的 this,而非执行时。箭头函数需要记着这句话:“箭头函数中没有 this 绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this,否则,this 为 undefined”。

    var name = "windowsName";

    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)     
        },

        func2: function () {
            setTimeout( () => {
                this.func1()
            },100);
        }

    };

    a.func2()     // Cherry

注:这里的箭头函数内的 this 的始终是 a 对象,所以不会报错。

在函数内部使用 _this = this

    var name = "windowsName";

    var a = {

        name : "Cherry",

        func1: function () {
            console.log(this.name)     
        },

        func2: function () {
            var _this = this;
            setTimeout( function() {
                _this.func1()
            },100);
        }

    };

    a.func2()       // Cherry

注:这里将 this 提前保存在 _this 里面了,所以 this 始终指向 a 对象。

你可能感兴趣的:(JavaScript 中的 this 指向问题)