JavaScript中this关键字的用法详解

全局环境中的 this

在非严格模式的全局执行上下文中，this 始终指向全局对象。在浏览器环境中，全局对象即为 window。

可以通过以下代码验证这一行为：

alert(this); // 显示 [object Window]
alert(this === window); // 显示 true

事件处理中的 this

当 this 出现在 DOM 元素的事件处理函数中时，它通常指向当前触发该事件的 DOM 元素节点。这适用于 HTML 内联属性绑定或 JS 标准事件监听绑定的情况。

第1步：HTML 内联绑定

目的：演示直接在 HTML 标签中使用 onclick 属性时 this 的指向。

操作与参数：

• 创建一个按钮元素，使用内联属性绑定事件。
• 代码示例：

<input type="button" value="点击这里显示this" onclick="alert(this)" />

结果：点击按钮后，弹出框显示 [object HTMLInputElement]，证实 this 指向该输入控件本身。

第2步：JS 代码绑定

目的：演示通过 JavaScript 获取 DOM 元素并赋值事件回调时 this 的指向。

操作与参数：

• 定义一个带有 id 的按钮，并通过 document.getElementById 获取引用。
• 将匿名函数赋值给元素的 onclick 属性。
• 代码示例：

<input id="demo" type="button" value="点击这里显示this" />
<script type="text/javascript">
document.getElementById("demo").onclick = function(){
    alert(this); // 显示 [object HTMLInputElement]
}
</script>

结果：点击按钮后，this 同样指向该按钮元素节点。

构造函数中的 this

在使用 new 关键字调用构造函数创建对象实例时，this 指向新创建的对象实例。此时，this 属性被挂载到该实例上，实现了数据的隔离与方法的重用。

以下示例展示了如何在一个构造函数中利用 this 定义公共属性与方法：

var user = "xiaoming"; // 全局变量

function ItXueyuan(user){
    this.name = "IT学院";
    this.domain = "www.itxueyuan.org";
    this.user = user; // 实例属性，遮蔽同名全局变量
    
    this.showUser = function(){
        alert(this.user);
    }
}

// 创建第一个实例
var zhangsan = new ItXueyuan("zhangsan");
zhangsan.showUser(); // 输出 "zhangsan"

// 创建第二个实例
var wangming = new ItXueyuan("wangming");
wangming.showUser(); // 输出 "wangming"  

在上述逻辑中，ItXueyuan 每次被执行时，内部的 this 都会绑定到刚创建的 zhangsan 或 wangming 对象上，确保各自拥有独立的 user 状态。

以上就是 JavaScript this 关键字的详细用法总结，更多关于 JavaScript 前端基础知识的内容请关注本站其它相关文章！