JQuery中this的指向详解

在 JQuery 中，this 是一个非常重要的概念。它代表当前被选中的元素，也常被用来指向当前调用方法的对象。但是，由于 JavaScript 中 this 的指向比较复杂，许多开发者需要花费一定的时间去理解。

基本概念

在 JavaScript 中，this 相当于一个指针，指向函数运行时所在的上下文对象。理解 this 的指向是理解 JavaScript 中面向对象编程的关键。

在 JQuery 中，this 一般指代 jQuery 对象，即被选中的元素的集合。当使用 jQuery.each() 方法时，this 指代当前正在被处理的元素。

改变 this 的指向

在 JavaScript 中，可以使用 call()、apply()、bind() 等方法显式地改变函数中 this 的指向。

使用 call、apply 改变 this 的指向

call() 和 apply() 可以传入的第一个参数为 this 的指向对象，即函数中 this 的指向将被改为这个对象。

var person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

var dog = {
  name: "Fido"
};

person.sayHello.call(dog); // 输出：Hello, Fido
person.sayHello.apply(dog); // 输出：Hello, Fido

使用 bind 改变 this 的指向

bind() 方法返回的是一个新的函数，它的 this 指向被传入的对象。该新函数不会立即执行，而要等到其被调用时才会执行。

var person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

var dog = {
  name: "Fido"
};

var dogSayHello = person.sayHello.bind(dog);

dogSayHello(); // 输出：Hello, Fido

示例说明

示例一

下面的示例展示了如何使用 this 取得一个元素的文本内容。

<div class="container">
  <p>Hello, world!</p>
</div>

<script>
  $(".container p").on("click", function() {
    // 这里的 this 指向被点击的 p 元素
    console.log($(this).text());
  });
</script>

示例二

下面的示例展示了如何使用 this 取得一个表单元素的值。

<input type="text" id="myInput">

<script>
  $("#myInput").on("blur", function() {
    // 这里的 this 指向被失焦的 input 元素
    console.log($(this).val());
  });
</script>

以上是关于 JQuery 中 this 的指向的详细攻略。希望这篇文章能够帮助开发者更好地理解和使用 JQuery 中的 this。