前端面试——关于this指向问题？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端面试——关于this指向问题？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

想要知道关于this的指向问题，首先要了解this的绑定规则。那么this到底是什么样的绑定规则呢？一起来研究一下吧！

绑定一：默认绑定

绑定二：饮食绑定

绑定三：显示绑定

绑定四：隐式绑定

1. 默认绑定

什么情况下使用默认绑定呢？独立函数调用。独立的函数调用我们可以理解成函数没有绑定到某个对象上调用：

首先在非严格模式下，this指向全局对象。在严格模式下，函数内的this指向undefined，全局中的this指向不会改变。

1.1 严格模式下的默认绑定

举个栗子：

"use strict";
 
// var 定义的变量 a 挂载到 window 对象上
var a = 10;
 
function foo () {
  // 严格模式下，函数内 this 指向 undefind
  console.log('this1 --- ', this) // undefined
 
  // 报错，Uncaught TypeError: Cannot read properties of undefined (reading 'a')
  console.log(this.a) 
 
  console.log(window.a) // 10
}
 
// 严格模式 不会改变全局中 this 的指向
console.log('this2', this) // window
 
foo();

1.2 let、const、var 变量的默认绑定

let、const声明的全局变量，不会绑定到window上

var声明的全局变量，会被绑定到window上

let a = 10
const b = 20
 
function foo () {
  console.log(this.a) // undefined
  console.log(this.b) // undefined
}
 
foo();
 
console.log(window.a) // undefined

1.3 函数作用域中的this指向

关键点：

要判断函数是谁调用的，进而确定this绑定的作用域是哪儿个
要确定好打印的函数内部的变量。还是this上的变量（打印a、打印this.a不一样）

// window 中的 a
var a = 1;
 
function foo () {
  // 函数中的 a
  var a = 2
 
  console.log(this) // Window{...}
 
  // 打印的是 this.a，不是 a，因此是 window 下的 a（是 window 调用的 foo 函数）
  console.log(this.a) // 1
}
 
foo()

再举个例子：

var a = 1
 
function foo () {
 
  var a = 2
 
  function inner () {
    // inner 内没有 a，因此往上面的 foo 的函数作用域找
    // foo 内有 a，但是 foo 是 window 调用的，foo 内的 this 就是 window
    // 打印的是 this a，不是 a，因此要判断正确的 this，也就是 window
    // 最终输出 1
    console.log(this.a)
  }
 
  inner()
}
 
foo()