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

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

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

非严格模式下的 this 指向

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

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

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

    如果 callapply 传入的表示 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 的参数不是对象(nullundefined),其会被隐式转换为全局对象 windowglobalThis

    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. callapplybind 相关的函数调用 :如果 callapplybind 传入的表示 this 的参数不是对象(nullundefined),其会仍会保持为原始值。(该是啥就是啥)
相关推荐
ocean21035 分钟前
2025-2026年C++专题大厂面试高频问题
开发语言·c++·面试
白远山12 分钟前
健身场馆无人自动化系统实战指南:从架构设计到部署全流程解析
java·开发语言·架构·需求分析
右耳朵猫AI19 分钟前
Node.js周刊2026W37 | 三处进程崩溃修复、fs 内置 glob、Workers 模块注册表、Vitest 5.0
javascript·后端·node.js
右耳朵猫AI28 分钟前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js
郝学胜-神的一滴37 分钟前
C++20模板元编程 02:吃透模板基础核心四大核心知识点
开发语言·数据结构·c++·程序人生·软件工程·visual studio
troy12842 分钟前
Visual Studio Code 详细教程:从入门到高效开发
开发语言·python
泡海椒1 小时前
jquick-pdf 超详细入门教程:Java 轻量级 HTML 模板生成 PDF 工具
java·开发语言
八年。。1 小时前
WSL学习(三)——搭建Linux + C++ + SOME/IP 基础开发环境
开发语言·笔记·ubuntu
孙启超1 小时前
【AI开发之Rust】第 6 课:结构体、枚举与方法 —— 开始定义自己的类型
开发语言·人工智能·后端·ai·rust
电商API_180079052471 小时前
电商平台数据分析实战_帖子
开发语言·爬虫·python·数据采集·京东