首先你要理解下面三句話
1.元素繫結事件，方法中的this是當前操作元素
2.方法名前面是否有點，有點，點前面是誰，this就是誰，沒有this是window（嚴格模式下是undefined）
3.建構函式執行，方法中的this是當前類的一個例項。
下面通過不同的情況來解釋一下：

1.全域性環境,普通函式呼叫,普通物件

const obj={a:this}
obj.this===window  //true
function fn(){
    console.log(this)   //window
}

2.建構函式

  function a() {
    console.log(this)
  }
  const obj = new a()   //  this是  a{}
  a()                    // this是 'window'

 

new出來的物件，this指向了即將new出來的物件。
當做普通函式執行，this指向window。

3.物件方法

  const obj = {
    x: 0,
    foo: function () {
      console.log(this)
    }
  }
  obj.foo()                 // obj
  const a = obj.foo
  a()                       //window

作為物件方法，this指向了這個物件。(新物件繫結到函式呼叫的this)
一旦有變數直接指向了這個方法，this為window.

4.物件方法(特殊情況)

如果在方法裡面執行函式，this指向window.

  const obj = {
    x: 0,
    foo: function () {
      console.log(this)      // obj
      function foo1() {
        console.log(this)    //window
      }
      foo1()
    }
  }
  obj.foo()   

5.建構函式prototype屬性

  function Fn() {
    this.a = 10
    let a = 100
  }
  Fn.prototype.fn = function () {
    console.log(this.a)             // 10 說明指向了obj這個物件
  }
  const obj = new Fn()
  obj.fn()

 

原型定義方法的this指向了例項物件。畢竟是通過物件呼叫的。

6.call ,apply, bind

  const obj = {
    x: 10
  }
  function fn() {
    console.log(this)
  }
  fn.call(obj)      //obj
  fn.apply(obj) //obj
  fn.bind(obj)() //obj

this指向傳入的物件。

7. 箭頭函式

  obj = {
    a: 10,
    c: function () {
      b = () => {
        console.log(this)           //指向obj
      }
      b()
    }
  }
  obj.c()

在方法中定義函式應該是指向window,但是箭頭函式沒有自己的this，所以指向上一層作用域中的this.

8.繫結方式

隱士繫結：誰呼叫方法，this指向誰。
顯示繫結:call,bind,apply
new 繫結
優先順序問題：new>顯示繫結>隱式繫結
如果你上面的都瞭解通透了，做下面幾個this指向問題是非常簡單的。

9.this練習題

9.1

9.2

9.3

9.4

答案解析

9.1 undefined  language
obj.prop.fullName   //沒有undefined  this就是window 
9.2  window
9.3  0  30
this => myfun =>myfun.a =>0
this => myfun =>myfun.a =>30  設定私有屬性的值
9.4 fn object undefined 20  報錯  20 NaN
9.4解析看下圖