JavaScript中this关键字使用方法详解

闻溪

发布时间：2026-10-13| 3人浏览过

原创

在面向对象编程中，this通常指向当前对象实例，但在JavaScript中，由于语言实现特性（Object-based而非严格OO），this的指向随调用方式动态变化。本文梳理了内联事件、DOM绑定、类定义、原型方法及嵌套函数等场景下的this行为，帮助开发者理解并规避常见陷阱。

内联HTML事件属性中的this

当在HTML元素的事件属性（如onclick）中直接编写代码或使用内联调用时，脚本引擎会为该元素生成一个匿名成员方法，并将event handler指向该方法。此时，this关键字指代的是当前触发事件的DOM元素实例。

例如：<div onclick="console.log(this)">Element</div>，这里的this即为该div元素。

DOM事件处理函数中的this

在使用传统DOM方式绑定事件时，this的行为取决于具体方法：

DHTML方式（onclick赋值）：当直接将函数赋值给元素的onclick属性时，this指向该DOM元素实例。这是最直观的面向对象风格，等同于为元素实例添加成员方法。
IEattachEvent方式：如果使用attachEvent注册事件，this将指向全局window对象。这是因为此时处理的只是普通函数调用，与特定DOM对象无直接绑定关系。若需获取触发元素，应使用this.event.srcElement。

类定义与原型方法中的this

JavaScript通过构造函数和原型链模拟类定义。在此场景中：

在构造函数内部，this指向即将创建的新实例对象。必须使用this来定义实例属性和方法，否则变量将成为局部变量而不在原型链上共享。
在原型方法（如JSClass.prototype.ToString）中，this同样指向调用该方法的实例对象。

示例分析：若构造函数内定义了局部变量myName而在原型方法中直接引用，将报错未定义；但若通过this.m_Name定义属性，则可通过实例访问。

原型扩展内部对象时的this

为内置对象（如Function.prototype）添加方法时，this指代的是该方法被调用时的对象实例。这与其他语言中扩展类的方法逻辑一致，主要用于增强内置功能或工具函数。

结合对象方法与DOM绑定的复杂场景

当对象方法被作为回调函数传递给DOM事件（如attachEvent）时，this的指向会发生偏移。

典型案例：若在构造函数中将对象的某个方法（如this.ToString）绑定到内部DOM元素的点击事件，当点击触发时，在该方法内部的this将不再指向原对象实例，而是指向DOM元素（或window，视绑定方式而定）。这导致原对象的属性无法通过this访问，通常返回undefined。解决此类问题通常需要保存this的引用（如使用self = this）或利用闭包捕获上下文。

CSS表达式中的this

在老旧的CSS expression属性中（主要见于旧版IE），this指代的是应用该样式的DOM元素本身，类似于内联事件属性的行为。例如：style="width: expression(this.parentElement.width);"。

嵌套函数中的this与作用域

在函数内部定义的嵌套函数中，this的行为容易混淆。通常，内部函数的this也遵循上述规则（默认指向window或在严格模式下为undefined），但JavaScript的变量访问是通过作用域链查找的。

实例演示：

function OuterFoo() {
    this.Name = 'Outer Name';
    function InnerFoo() {
        var Name = 'Inner Name'; // 局部变量
        alert(Name + ', ' + this.Name); // this.Name 依赖外部this指向
    }
    return InnerFoo;
}
OuterFoo()();

在上述代码中，内部函数InnerFoo返回后执行时，由于其未被显式绑定对象，this在非严格模式下指向全局对象。但若外部函数OuterFoo是作为方法调用，情况会有所不同。原文案例指出结果为“Inner Name, Outer Name”，这暗示了在特定解释器或上下文中，内部函数可能保留了对外部this所在对象的某种关联，或者此处主要强调变量Name取自局部作用域，而this.Name取自外部对象的属性。需注意的是，标准JS中内部函数调用通常不继承外部构造函数的this，除非使用了call/apply或箭头函数（ES6+）。