js中this的用法

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象
1.全局作用域或者普通函数中this指向全局对象window

//直接打印
console.log(this) //window

//function声明函数
function bar () {console.log(this)}
bar() //window

//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window

//自执行函数
(function () {console.log(this)})(); //window

2.方法调用中谁调用this指向谁

//对象方法调用
var person = {
    run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
    console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
   console.log(this) //btn
})

3.在构造函数或者构造函数原型对象中this指向构造函数的实例

//不使用new指向window
function Person (name) {
    console.log(this) // window
    this.name = name;
}
Person('inwe')
//使用new
function Person (name) {
      this.name = name
      console.log(this) //people
      self = this
  }
  var people = new Person('iwen')
  console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people

4.箭头函数中this箭头函数指向定义它时所处的对象(宿主对象)
箭头函数内部的this是词法作用域，由上下文确定，（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 ）

var Person = {
    firstName: 'hello',
    lastName: 'world',
    getFullName: function() {
        console.log(this)
        var first = this.firstName // hello
        var fn = function() {
            console.log(this)
            return this.firstName + this.lastName
        }
        return fn()
    }
}
Person.getFullName()

箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者Person

5.call和apply可以改变this的指向