当前位置: 首页 > news >正文

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

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

绑定一:默认绑定

绑定二:饮食绑定

绑定三:显示绑定

绑定四:隐式绑定

1. 默认绑定

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

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

1.1 严格模式下的默认绑定

举个栗子:

"use strict";// var 定义的变量 a 挂载到 window 对象上
var a = 10;function foo () {// 严格模式下,函数内 this 指向 undefindconsole.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) // windowfoo();

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

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

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

let a = 10
const b = 20function foo () {console.log(this.a) // undefinedconsole.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 () {// 函数中的 avar a = 2console.log(this) // Window{...}// 打印的是 this.a,不是 a,因此是 window 下的 a(是 window 调用的 foo 函数)console.log(this.a) // 1
}foo()

再举个例子:

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

2. 隐式绑定

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

。。。。。还没写完

相关文章:

  • 使用Spring Boot和Tess4J实现本地与远程图片的文字识别
  • SVN 常用命令汇总(2024)
  • 上位机图像处理和嵌入式模块部署(自定义算法)
  • React16源码: React中commit阶段的commitRoot的主流程源码实现
  • 单片机学习笔记---矩阵键盘
  • 源 “MySQL 5.7 Community Server“ 的 GPG 密钥已安装,但是不适用于此软件包。请检查源的公钥 URL 是否配置正确。
  • [UI5 常用控件] 03.Icon, Avatar,Image
  • 数据验证方法补充ValidationRule
  • 《动手学深度学习(PyTorch版)》笔记2
  • Ubuntu20.04安装cuda12.11
  • 当一个json存在id 和_id 的时候,使用JSONObject.parseObject进行序列号操作,映射错误
  • HCIA学习作业二
  • 【C语言/数据结构】排序(直接插入排序|希尔排序)
  • 单片机设计_智能蓝牙电子秤(51单片机、HX711AD)
  • 快速上手!使用Docker和Nginx部署Web服务的完美指南
  • Android优雅地处理按钮重复点击
  • CSS3 变换
  • JavaScript中的对象个人分享
  • leetcode讲解--894. All Possible Full Binary Trees
  • magento 货币换算
  • PHP的类修饰符与访问修饰符
  • TypeScript实现数据结构(一)栈,队列,链表
  • 关于extract.autodesk.io的一些说明
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 深入浅出webpack学习(1)--核心概念
  • 微信小程序:实现悬浮返回和分享按钮
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • Semaphore
  • #laravel 通过手动安装依赖PHPExcel#
  • #QT(串口助手-界面)
  • (1)虚拟机的安装与使用,linux系统安装
  • (145)光线追踪距离场柔和阴影
  • (C语言)逆序输出字符串
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (二开)Flink 修改源码拓展 SQL 语法
  • (牛客腾讯思维编程题)编码编码分组打印下标(java 版本+ C版本)
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .Mobi域名介绍
  • .NET Core跨平台微服务学习资源
  • .NET Reactor简单使用教程
  • .NET Remoting学习笔记(三)信道
  • .NET开源快速、强大、免费的电子表格组件
  • .net知识和学习方法系列(二十一)CLR-枚举
  • /3GB和/USERVA开关
  • :not(:first-child)和:not(:last-child)的用法
  • @ModelAttribute 注解
  • [ 转载 ] SharePoint 资料
  • []FET-430SIM508 研究日志 11.3.31
  • [BetterExplained]书写是为了更好的思考(转载)
  • [C++] 默认构造函数、参数化构造函数、拷贝构造函数、移动构造函数及其使用案例
  • [C++]——带你学习类和对象
  • [Enterprise Library]调用Enterprise Library时出现的错误事件之关闭办法