面试题:说说你对 JS 中 this 指向的了解

面试题:说说你对 JS 中 this 指向的了解

JS 的代码执行环境分为严格模式和非严格模式 ,可以通过 use strict 打开严格模式,此时 JS 在语法检查上会更加严格。要讨论 JS 中的 this 指向问题,也要分为严格模式和非严格模式进行讨论。这里先讨论非严格模式下的 this 指向,然后再讨论严格模式下的不同之处,未谈到的地方默认与严格模式相同。

非严格模式下的 this 指向

  1. 函数独立调用 :此时函数中的 this 指向全局对象(浏览器环境是 window,Node.js 环境是 globalThis)

  2. 函数作为对象的方法调用 :此时函数中的 this 指向该对象。

  3. 函数通过 call、apply 调用 :call 和 apply 方法可以用于直接调用函数,同时指定 this 和传入参数。

    如果 call、apply 传入的表示 this 的参数不是对象(原始值),其会被隐式转换为对应的包装对象。

    js 复制代码
    const obj = new Object();
    fun_name.call(obj, param1, param2,...); // 调用 fun_name 函数,同时指定 this 为 obj,传入多个参数
    fun_name.call(obj, [parm1, param2, ...]); // 调用 fun_name 函数,同时指定 this 为 obj,传入一个数组参数
  4. 调用经 bind 生成的函数 :bind 方法可以生成一个新的函数,同时指定新函数的 this。

    如果 bind 传入的表示 this 的参数不是对象(null 或 undefined),其会被隐式转换为全局对象 window 或 globalThis。

    js 复制代码
    const obj = new Object();
    const new_fun = fun_name.bind(obj); // 生成一个新函数,同时指定新函数中的 this
    new_fun();
  5. 调用 new 构造函数 :此时构造函数中的 this 指向创建的新对象。

  6. 箭头函数调用 :箭头函数没有自己的 this,其使用 this 时会捕获其声明位置的上下文中的 this。

  7. 时间处理函数调用 :此时函数中的 this 通常指向触发事件的 DOM 元素。

注意:这里的函数默认是非箭头函数。

严格模式下的 this 指向

  1. 函数独立调用 : 此时 this 指向 undefined
  2. call、apply、bind 相关的函数调用 :如果 call、apply、bind 传入的表示 this 的参数不是对象(null 或 undefined),其会仍会保持为原始值。(该是啥就是啥)
相关推荐
云和数据.ChenGuang1 小时前
Python 常见特殊方法详解:__new__、__init__、__del__、__str__、__repr__ 与 __getattribute__
开发语言·人工智能·python·1024程序员节
xyouyuweizhu1 小时前
字节流与字符流:Java IO 的两条主线该怎么选
java·开发语言·python
多弗朗皮卡丘2 小时前
C++的IO流
开发语言·c++·io流·文件io流
liyi_hz20082 小时前
O2OA(翱途) V10.1 即将发布|功能再升级,安全再加固,协同更高效!
java·javascript·windows·开源软件
骑着蜗牛撵大象3272 小时前
AI Agent 工程化开发实战(三):用 StateGraph 给智能体搭一条可回放的状态流水线
java·开发语言·jvm·ai·状态管理·langgraph·stategraph
itmigrate3 小时前
Rust 里的所有权误区:不是不写 clone 就叫高性能
开发语言·后端·rust
Brilliantwxx3 小时前
【Linux】 文件访问与路径解析:目录、文件名、dentry、路径缓冲与 dcache 全解析
linux·运维·服务器·开发语言·spring
摇滚侠3 小时前
《On Java 中文版 基础卷》阅读笔记 初始化和清理 08
java·开发语言·笔记
xiangyun613 小时前
C++ 手撕 shared_ptr:引用计数与控制块到底长什么样?
开发语言·c++·算法·面试·stl
XiYang-DING3 小时前
P4009.和为K的子数组个数 & P5522.异或和为 k 的子数组个数
java·开发语言