JS深入/this详解

目录

一、this指向原理

二、this指向例子详解【把例子看完看懂就差不多掌握了this了】

三、改变this的指向 

一、this指向原理

this的指向始终坚持的原理：

（1）this永远指向最后调用它的那个对象

（2）前面没有调用对象的那最后调用它的的就是全局对象window【这里要注意是不是在严格模式情况下，下面的例子有介绍】

（3）如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this【就是最近一层非剪头函数的父级】，否则，this 为 undefined

二、this指向例子详解【把例子看完看懂就差不多掌握了this了】

(1) 例一，最后调用fn()的是a，this永远指向最后调用它的那个对象，则fn()函数中的this指向的就是a对象，则输出的就是a中的name"Cherry"

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

（2）例二，a()前面没有调用对象，则调用它的就是全局对象window，所以a()函数中的this指向的就是window，输出的就是"windowsName"【需要注意的是，没有严格模式的时候，前面没有调用对象的则调用它的就是window对象，即window.a()；要是使用严格模式的话，全局模式就是undefined】

非严格模式：a()函数中的this指的就是window

 var name = "windowsName";
 function a() {
    var name = "Cherry";
    console.log(this.name);     // windowsName
    console.log("inner:" + this);  // inner:[object Window]
 }
 a();
 console.log("outer:" + this)   // outer:[object Window]

严格模式：a()函数中的this指的就是undefined【注意查看输出的区别】

"use strict"
 var name = "windowsName";
 function a() {
   var name = "Cherry";
   console.log(this.name); // Uncaught TypeError: Cannot read property 'name' of undefined
   console.log("inner:" + this); // inner:undefined
 }
 a();
 console.log("outer:" + this) // outer:[object Window]

 （3）例三，永远记住上面提到的原理："this永远指向最后一个调用它的对象"，所以虽然调用fn()时最前面加了一个window，但最后一个调用它的仍然是a()，所以fn()中的this的指向仍然是a对象

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

（4）例四，原理分析就和例三十一样的，就算 a 中没有 name 这个属性，也不会继续向上一个对象寻找 this.name，而是直接输出 undefined

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

（5）例五，【这个例子有些陷阱】虽然对fn进行了赋值，但是没有调用，"this 永远指向最后调用它的那个对象，前面没有调用对象的那最后调用它的的就是全局对象window"，所以最后调用fn()的就是全局变量window，则输出的就是全局变量中的name

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

（6）例六，只要记住"this 永远指向最后调用它的那个对象，前面没有调用对象的那最后调用它的的就是全局对象window"，所以就知道innerFunction()函数的其实就是window调用的，输出的就是全局变量name

 var name = "windowsName";
 function fn() {
     var name = 'Cherry';
     innerFunction();
     function innerFunction() {
         console.log(this.name);  // windowsName
     }
  }
  fn()

三、改变this的指向

1、使用ES6的箭头函数改变this指向

（1）不使用箭头函数：在这个例子中，调用setTimeout的对象是window，所以this指的就是window对象，但是window对象中并没有function1函数，所以会报错

 var name = "windowsName";
 var a = {
   name : "Cherry",
   func1: function () {
     console.log(this.name)     
   },
   func2: function () {
     setTimeout( function () {
       this.func1() // Uncaught TypeError:  this.func1 is not a function
     },100);
   }
 };
 a.func2()

（2）使用箭头函数：使用箭头函数进行改造，ES6 的箭头函数是可以避免 ES5 中使用 this 的坑的，箭头函数的 this 始终指向函数定义时的 this，而非执行时【“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。】

由上面的分析知道，定时器中的this绑定的就是func2中的this，输出func2中的this，可只是a()对象，所以输出就是a对象中的name

 var name = "windowsName";
 var a = {
   name : "Cherry",
   func1: function () {
      console.log(this.name) // Cherry 
   },
   func2: function () {
     setTimeout( () => {
        this.func1()
     },100)
   }
}
a.func2()

2、在函数内部使用_this = this

为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window，设置 var _this = this，这里的 this 是调用 func2 的对象 a

 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

3、使用 apply、call、bind

（1）使用 apply

  var a = {
     name : "Cherry",
     func1: function () {
        console.log(this.name) // Cherry
     },
     func2: function () {
        setTimeout(  function () {
            this.func1()
        }.apply(a),100);
     }

  };
  a.func2()

（2）使用 call

 var a = {
    name : "Cherry",
    func1: function () {
        console.log(this.name) // Cherry
    },
    func2: function () {
      setTimeout(  function () {
          this.func1()
       }.call(a),100);
    }
 };
 a.func2()

（3）使用 bind

 var a = {
    name : "Cherry",
    func1: function () {
         console.log(this.name)  // Cherry
    },
    func2: function () {
         setTimeout(  function () {
             this.func1()
         }.bind(a)(),100);
     }
 };
 a.func2()

参考文献地址：this、apply、call、bind - 掘金

【大部分都是sunshine小小倩大神的原创，我只是按照我自己的思路完善整理了一下，感谢大神的整理】