javascript this是什么_它的值在什么情况下会改变?

14次阅读

javaScript中this指向由函数调用方式决定:普通调用指向全局对象undefined,对象方法调用指向该对象,构造调用指向新实例,显式绑定指向指定对象;箭头函数无this,继承外层。

javascript this是什么_它的值在什么情况下会改变?

javascriptthis 指向谁,完全取决于「函数怎么被调用」

this 不是定义时决定的,也不是由函数本身决定的。它在每次函数执行时才绑定,绑定规则只看调用位置和方式。常见误解是认为 this 指向函数所在对象,但其实只要函数被“脱离上下文”调用,this 就会变。

四种主要调用方式决定 this

记住这四类,覆盖 95% 的实际场景:

  • 普通函数调用fn() → 非严格模式thiswindow浏览器)或 globalThisnode),严格模式下是 undefined
  • 对象方法调用obj.method()thisobj(前提是没被赋值或解构)
  • 构造函数调用new Fn()this 是新创建的实例对象
  • 显式绑定fn.call(obj, ...)fn.apply(obj, [...])fn.bind(obj)this 强制为传入的 obj

容易踩坑的三种典型场景

这些地方 this 最常“意外丢失”:

  • 对象方法赋值给变量后调用
    const obj = { name: 'a', say() { console.log(this.name) } }; const fn = obj.say; fn(); // this 是 undefined(严格模式),输出 undefined —— 不是 'a'
  • 回调函数中直接使用对象方法
    button.addEventListener('click', obj.say); // 点击时 this 指向 button,不是 obj

    解决:用 obj.say.bind(obj)() => obj.say()obj.say.bind(obj)

  • 箭头函数没有自己的 this:它会沿作用域链向上找外层函数的 this,且无法被 call/apply/bind 改变

es6 类方法里的 this 为什么有时也出问题?

类中的方法默认不自动绑定 this,尤其在作为事件处理器、定时器回调、或传入高阶函数(如 mapsetTimeout)时,本质还是上面的「赋值后调用」问题:

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

  • class C { handleClick() { console.log(this) } }; const c = new C(); setTimeout(c.handleClick, 100)thisundefined(严格模式)
  • 修复方式:在 constructor 中绑定 this.handleClick = this.handleClick.bind(this),或用箭头属性 handleClick = () => { ... },或调用时写成 setTimeout(() => c.handleClick(), 100)

真正麻烦的不是规则多,而是你得时刻问自己一句:“这个函数此刻是被谁调用的?”——而不是“它写在哪儿”。

text=ZqhQzanResources