前端面试——关于this指向问题?

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

绑定一:默认绑定

绑定二:饮食绑定

绑定三:显示绑定

绑定四:隐式绑定

1. 默认绑定

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

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

1.1 严格模式下的默认绑定

举个栗子:

javascript 复制代码
"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上

javascript 复制代码
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、打印t h is .a不一样**)**
javascript 复制代码
// 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()

再举个例子:

javascript 复制代码
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()

2. 隐式绑定

当函数引用有上下文对象时,如obj.foo()的调用方式,foo()

。。。。。还没写完

相关推荐
北海-cherish37 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
C嘎嘎嵌入式开发40 分钟前
(2)100天python从入门到拿捏
开发语言·python
AALoveTouch1 小时前
网球馆自动预约系统的反调试
javascript·网络
Stanford_11061 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_915909062 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
Vallelonga2 小时前
Rust 中的数组和数组切片引用
开发语言·rust
Kiri霧2 小时前
Rust模式匹配详解
开发语言·windows·rust
white-persist3 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse3 小时前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学