在前端编程中，经常会听到关于 this、$this 和 $(this) 的概念。虽然它们看起来很相似，但实际上它们有着不同的含义和用法。本文将详细介绍这三个概念的区别和应用场景。
什么是 "this"
在 JavaScript 中，this 关键字表示当前执行上下文环境中的对象。具体而言，this 指向调用当前函数的对象或者全局对象（当函数未被任何对象所拥有时）。例如：
let person = {
name: 'Alice',
sayHello: function() {
console.log(`Hello, my name is ${this.name}.`);
}
}
person.sayHello(); // 输出 "Hello, my name is Alice."在上面的例子中，this 指代的是 person 对象，因为 sayHello() 方法是通过 person 对象来调用的。
什么是 "$this"
$this 不是 JavaScript 的原生关键字，而是 jQuery 框架提供的一个特殊变量。它表示当前正在处理的 jQuery 对象，通常用在事件处理程序中。例如：
<button id="myButton">Click me!</button>
<script>
$('#myButton').click(function() {
console.log($this); // 输出 "<button id="myButton">Click me!</button>"
});
</script>在上面的例子中，$this 指代的是 $('#myButton') 对象，即触发了 click 事件的按钮元素。
什么是 "$(this)"
与 $this 相似，$(this) 也是 jQuery 提供的一个常用操作。它表示当前正在处理的 DOM 元素，通常用于查找和修改元素的属性和样式。例如：
-- -------------------- ---- ------- --- ------------ -------- ------ -------- ------ -------- ------ ----- -------- ---------- --------------------- - ----------------------------- --- ---------
在上面的例子中，$(this) 指代的是被点击的 <li> 元素，将其添加了一个名为 "selected" 的 CSS 类。
区别和应用场景
通过上面的解释和示例代码，我们可以总结出这三个概念的区别和应用场景：
this：指向当前执行上下文环境中的对象，可在任何 JavaScript 中使用。$this：是 jQuery 提供的特殊变量，表示当前正在处理的 jQuery 对象，只能在 jQuery 代码中使用。$(this)：是 jQuery 提供的常用操作，表示当前正在处理的 DOM 元素，只能在 jQuery 事件处理程序中使用。
因此，当你需要访问 JavaScript 对象的属性或方法时，应该使用 this；当你需要访问 jQuery 对象的属性或方法时，应该使用 $this；当你需要访问 DOM 元素的属性或样式时，应该使用 $(this)。
总结
在前端编程中，掌握好 this、$this 和 $(this) 的含义和用法，可以让我们更加灵活地操作 JavaScript 对象、jQuery 对象和 DOM 元素。希望本文能够对初学者有所帮助，也希望更多的开发者能够深入了解和熟练掌握这些概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27219