什么是this指向？怎么改变this指向

Posted 2023-04-26

参考技术A this在函数定义时确定不了，只有在函数指向时才能确定，this就是谁调用指向谁，没有上一级即指向widow。
第一：this指的是函数运行时所在的环境（即调用的对象）。
第二：javascript 语言之所以有this的设计，跟内存里面的数据结构有关系
第三：每一个方法或者是对象都有其this指向；
举例：

例：

指向上一级，假如调用这个函数的有多级对象，那么this指向的是调用它的上一级对象，例：

当函数体被重新赋值后再调用，this指向window对象

就六个字 谁调用，指向谁。但是如果一个函数中有this，并且这个this没有被上一级调用，那么这个this的指向就是window。

如果一个函数中有this，这个函数被上一级对象调用，那么this就指向上一级对象

如果一个函数有this，假如调用这个函数的有多级对象，那么this指向的是调用它的上一级对象。

我们可以用apply（），bind（），call（）；这三个方法来改变this的指向。
举例说明：

注：这三种方法在没有接收其他参数的情况下没有什么太大不同，但是bind（）方法后必须加‘（）’，否则会报错。

call（）方法比较简单易操作；
apply（）在接收其他新的参数的时候，这些参数必须放在一个数组里；
bind（）在使用的时候必须加（）。

箭头函数与this指向问题

箭头函数中this的指向问题

1. 箭头函数不会改变this的指向，在它外面拿到的this是什么，它里面获取到的就是什么
2. setTimeout方法挂载在window上面，高程中写道，超时调用的代码都是在全局作用域下执行，非严格模式下this指向window对象，严格模式下为undefined
3. 老的通过闭包获取this的方法，都可以通过箭头函数来替换

// 箭头函数不会改变this指向

const obj = {
  name: ‘xcc‘,
  func: function() {
    console.log(‘---1---‘, this)
  },
  func1: () => {
    console.log(‘---2---‘, this)
  },
  func2: function() {
    console.log(‘---3---‘, this)  // { name: ‘xcc‘, ...}
    setTimeout(function() {
      console.log(‘---4---‘, this)
    }, 1000)
  },
  func3: function() {
    setTimeout(() => {
      console.log(‘---5---‘, this)
    }, 1500)
  },
  func4: function() {
    const _this = this
    setTimeout(function() {
      console.log(‘---6---‘, _this)
    }, 2000)
  }
}

obj.func()  // { name: ‘xcc‘, func: [Function: func], func1: [Function: func1] }

// 箭头函数没有this的机制，在箭头函数外面拿到的是什么，在里面拿到的就是什么
obj.func1() // {}

console.log(this) // {}


obj.func2()

// setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中，
// 写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”
// 箭头函数中的this始终都是指向当前作用域的this
obj.func3() // ---5--- { name: ‘xcc‘, ...}


// 采用闭包来获取this
obj.func4() // ---6--- { name: ‘xcc‘, ...}