24 JavaScript学习：this

this在对象方法中

在这里插入图片描述

在 JavaScript 中，this 的值取决于函数被调用的方式。在对象方法中，this 引用的是调用该方法的对象。

让我们看一个简单的例子：

const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName()); // 输出 "John Doe"

在这个例子中，fullName 方法内部的 this 引用的是 person 对象，因为 fullName 方法是通过 person 对象来调用的。

但是，this 并不总是指向期望的对象。在 JavaScript 中，函数的执行上下文是动态确定的。这意味着 this 的值取决于函数被调用的方式，而不是它是在哪里被定义的。

例如：

const anotherPerson = {
  firstName: 'Jane',
  lastName: 'Smith',
  fullName: person.fullName
};

console.log(anotherPerson.fullName()); // 输出 "Jane Smith"

在这个例子中，虽然 fullName 方法最初是作为 person 对象的一个属性被定义的，但是当它被 anotherPerson 对象调用时，this 引用的是 anotherPerson 对象，因为它是由 anotherPerson 对象来调用的。

this单独使用

在这里插入图片描述

在 JavaScript 中，this 的值取决于函数被调用的方式。当 this 单独使用时，它的值通常是全局对象（在浏览器中是 window 对象）或者在严格模式下是 undefined。

让我们看几个例子来理解：

在全局作用域中使用 this：

console.log(this === window); // 在浏览器中输出 true

在这个例子中，this 在全局作用域中被调用，因此它引用的是全局对象 window。

在函数内部使用 this：

function myFunction() {
  console.log(this === window);
}

myFunction(); // 在浏览器中输出 true

在这个例子中，this 在函数 myFunction 中被调用，由于没有明确指定调用对象，因此 this 引用的是全局对象 window。

在严格模式下使用 this：

'use strict';

function myStrictFunction() {
  console.log(this);
}

myStrictFunction(); // 输出 undefined

在严格模式下，如果函数内部的 this 没有明确指定，它的值将是 undefined。

this在函数中

在这里插入图片描述

在 JavaScript 中，this 在函数中的值是根据函数被调用的方式动态确定的。this 的值可能取决于以下几种情况：

全局环境下：

在全局环境下调用函数时，this 指向全局对象（浏览器中为 window 对象）。

console.log(this === window); // 在浏览器中会输出 true

作为对象方法调用：

当函数作为对象的方法被调用时，this 指向调用该方法的对象。

const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
}

obj.sayName(); // 输出 'Alice'

使用构造函数：

当函数作为构造函数被调用时，this 指向新创建的实例对象。

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  }
}

const person1 = new Person('Bob');
person1.sayName(); // 输出 'Bob'

使用 call、apply 或 bind 显式指定 this 值：

可以使用 call、apply 或 bind 方法显式指定函数中 this 的值。

function sayGreeting(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

const person = { name: 'Emma' };

sayGreeting.call(person, 'Hello'); // 输出 'Hello, Emma!'
sayGreeting.apply(person, ['Hi']); // 输出 'Hi, Emma!'
const sayHi = sayGreeting.bind(person, 'Hi');
sayHi(); // 输出 'Hi, Emma!'

this在事件句柄中

在事件处理函数中，this 的取值取决于事件触发的上下文。一般情况下，以下是常见场景：

DOM 元素中的事件处理函数:

在DOM元素中绑定的事件处理函数中，this 将会指向触发事件的DOM元素。

<button id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
  console.log(this.id); // 输出 'myButton'
});
</script>

使用事件监听器绑定的事件处理函数:

在使用 addEventListener 方法绑定事件处理函数时，this 将会指向触发事件的元素。

<button id="myButton">Click me</button>

<script>
function handleClick() {
  console.log(this.id); // 输出 'myButton'
}

document.getElementById('myButton').addEventListener('click', handleClick);
</script>

箭头函数的情况:

使用箭头函数作为事件处理函数时，箭头函数没有自己的 this 值，它会捕获其定义时的外部作用域的 this 值。

<button id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', () => {
  console.log(this); // 这里的 this 是全局对象，而不是按钮元素
});
</script>