如何在javascript中正确使用this关键字【教程】

7次阅读

javaScript中this由调用时上下文动态决定;箭头函数无自有this,继承外层普通函数的this;call/apply立即执行并指定this,bind返回预设this的新函数;对象方法赋值后调用会丢失this,需bind或箭头函数字段修复。

如何在javascript中正确使用this关键字【教程】

javascript 中,this 的值不是由函数定义时决定的,而是由**函数调用时的上下文**动态绑定的——理解这点,就避开了 80% 的坑。

为什么 this 在箭头函数里不指向调用者?

箭头函数没有自己的 this,它会沿作用域链向上查找外层普通函数的 this 值,而不是根据调用方式重绑。

  • 常见错误:在事件回调或定时器中用箭头函数想捕获实例 this,结果拿到的是定义时外层的 this(比如 window 或模块顶层对象)
  • 正确做法:需要动态 this 就用 function 声明;若需固定绑定,优先用 .bind() 或显式传参,而非依赖箭头函数“看起来像闭包
  • 例外场景:类方法中用箭头函数赋值给实例属性(如 handleClick = () => { ... }),此时靠的是类字段语法把函数绑定到实例,不是靠箭头函数本身的 this 行为

callapplybind 的关键区别

三者都用于手动指定函数执行时的 this,但调用时机和返回值不同。

  • call(thisArg, arg1, arg2, ...):立即执行,参数逐个传入
  • apply(thisArg, [arg1, arg2, ...]):立即执行,参数以数组形式传入(适合转发 arguments 或展开数组)
  • bind(thisArg, arg1, arg2, ...):不执行,返回一个新函数,this 和部分参数被预设(常用于事件监听、防抖、柯里化)
  • 注意:bind 返回的函数无法再用 call/apply 改写其 this(除非是箭头函数或严格模式下非对象 thisArg

对象方法里的 this 为什么会丢失?

当把对象方法赋值给变量或作为回调传入时,函数脱离原始对象调用,this 默认变为 undefined(严格模式)或全局对象(非严格模式)。

立即学习Java免费学习笔记(深入)”;

  • 典型场景:const btn = document.getElementById('x'); btn.onclick = obj.handleClick; —— 此时 handleClick 内的 this 不再是 obj
  • 修复方式:用 obj.handleClick.bind(obj)() => obj.handleClick()(牺牲性能)、或在类中用字段箭头函数(handleClick = () => { ... }
  • es6 解构也会触发丢失:const { method } = obj; method(); 同样失效

构造函数class 中的 this 有什么特殊性?

new 调用时,this 指向新创建的实例;但若忘记 new,普通调用会导致 this 指向全局或 undefined(严格模式)。

  • class 构造器内部的 this 必须由 new 初始化,否则报 TypeError: Class constructor X cannot be invoked without 'new'
  • 类方法默认不绑定 this,和普通对象方法一样存在丢失风险(不像 react class 组件的生命周期方法那样被自动绑定)
  • 静态方法中的 this 指向类本身,而非实例;不能访问 this.xxx 实例属性

真正难的不是记住规则,而是识别「谁在调用这个函数」——遇到 this 异常,先打断点看调用,再查函数是如何被传递和执行的。其他所有技巧,都是对这个事实的妥协或封装

text=ZqhQzanResources