JS中有两种模式，严格模式和非严格模式，我们看看这两种模式下this的情况

console.log(this); 
// Window
'use strict'
console.log(this); 
// Window
//两种模式下this的指向是相同的

函数内的this

• 普通模式

function fn () {
  console.log(this); //window
  console.log(this === window); //true
}
fn()

• 严格模式

'use strict'
function fn () {
  console.log(this); //undefined
  console.log(this === window); //false
}
fn()

不同模式下，函数内this的指向是不同的

call, apply, bind

• js中有方法可以改变this的指向，我们分别调用试试,call和apply的不同在于参数的不同，apply接受一个类数组对象，call用,传入多个参数
• call,apply

'use strict'
function thisWithCall () {
  console.log(this); //{name: 'harry'}
  console.log('name is', this.name); //name is harry
}

thisWithCall.call({name : 'harry'})

function thisWithApply () {
  console.log(this); //{name: 'potter'}
  console.log('name is', this.name); //name is potter
}

thisWithApply.apply({name : 'potter'})

• bind创建一个新函数，此过程中改变this的指向，我们通过调用新函数使用改变的this

function thisWithBind () {
  console.log(this); //henry
  console.log('name is', this); //name is henry
}

let newBind = thisWithBind.bind('henry')
newBind()

箭头函数的this

• 箭头函数没有this,也不能设置this,他们使用外层作用域中的this指向

const obj = {
  name : 'harry',
  getArrowName: () => {
    console.log(`name is ${this.name}`); //name is
    console.log(this); //window
  },
  getNormalName: function () {
    console.log(`name is ${this.name}`); //name is harry
    console.log(this); //{name: 'harry', getArrowName: ƒ, getNormalName: ƒ}
  }
}
obj.getArrowName()
obj.getNormalName()

箭头函数的this指向了全局作用域window,普通函数指向了obj的块级作用域

const count = {
  count : 0,
  addCount1 : function () {
    setTimeout(() => {
      console.log(this.count++); //0
      console.log(this); //{count: 1, addCount1: ƒ, addCount2: ƒ}
    })
  },
  addCount2: function () {
    setTimeout(function () {
      console.log(this.count++); //NaN
      console.log(this); //window
    })
  }
}
count.addCount1()
count.addCount2()

setTimeout的回调中，箭头函数的this指向了count块级作用域，普通函数指向了全局作用域

对象方法的this

var obj = {
  name : 'harry',
  getName : function() {
    return this
  }
}

console.log(obj.getName()); //{name: 'harry', getName: ƒ}
//this指向调用自己的对象

构造函数内的this

'use strict'
function Person (name, age) {
  this.name = name
  this.age = age
  this.getPerson = function () {
    return `我是${this.name},我${this.age}岁了`
  }
  this.returnThis = function () {
    return this
  }
}

var p = new Person('harry', 18)
console.log(p); //Person {name: 'harry', age: 18, getPerson: ƒ, returnThis: ƒ}
console.log(p.getPerson()); //我是harry,我18岁了
console.log(p.returnThis()); //Person {name: 'harry', age: 18, getPerson: ƒ, returnThis: ƒ}

构造函数内的this，指向其创建的实例

事件中的this

<button id="btn">点击</button>

//普通函数
var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //<button id="btn">点击</button>
})

//箭头函数
var btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  console.log(this); //window
})

按钮点击事件的this指向了按钮本身(普通函数)，箭头函数中指向了全局window