[JavaScript知识库]JavaScript中的this指向

1.在普通函数中this指向的时window

function fn () {

console.log(this)   //打印结果为window

}

fn() //调用函数    

2.在对象中的this指向

let obj ={
    name:'小明'，
    age:12,
    fn:function(){
     console.log(this)   //打印结果为这个方法的调用者 是obj这个对象
  }
}

obj.fn() //调用打印

3.事件处理函数的this指向

document.addEventListener.('click',function(){

    console.log(this) //this指向这个事件的事件源   也就是document

})

4.立即执行函数的this指向

(function () {
console.log(this)  //this指向的是window
} ())

5.在构造函数中this指向

function  Person() {
   console.log(this)
}

let obj = new Person()

//当前的this指向的是实例化构造函数 obj

6.箭头函数的this指向

let obj = {
      name: 1321,
      age: 345,
      fn: function () {
        console.log(this);    //指向的是obj对象
        let a = () => {
          console.log(this)   //指向的是上一级this的指向   也是obj对象
        }
        a()
      }
    }
    obj.fn()

7.使用call改变this的指向

call 会立即调用这个函数? call中可以传入参数，并且是可以多个参数

let obj = {
      name: 1321,
      age: 345,
      fn: function () {
        console.log(this);
        let a = () => {
          console.log(this)
        }
        a()
      }
    }
    obj.fn()
    obj.fn.call(window)

8.apply改变this指向

apply 也会立即调用这个函数? apply中也可以传入参数但是参数为数组?

  let obj = {
      name: 1321,
      age: 345,
      fn: function () {
        console.log(this);
        let a = () => {
          console.log(this)
        }
        a()
      }
    }
    obj.fn()
    obj.fn.apply(window)

9.bind改变this指向

bind改变this指向时不会立即调用这个函数? ?bind也可以传入参数，并且是多个参数

这时会创造出一个新的函数? ?调用这个函数会得到改变后的this指向

 let obj = {
      name: 1321,
      age: 345,
      fn: function () {
        console.log(this);
        let a = () => {
          console.log(this)
        }
        a()
        return 1
      }
    }
    obj.fn()
    let b = obj.fn.bind(window)
    console.log(b());