this指向

1. 元素的事件绑定

在事件处理中，this 一般指当前触发事件的元素。例如：

<button onclick="showElement(this)">Click me</button>

<script>
function showElement(element) {
    console.log(this); // 指向<button>元素
    console.log(element); // 指向<button>元素
}
</script>

2. 函数执行

this 在函数执行时取决于函数调用的方式。如果前面有点，this 就是点前面的对象，否则为全局对象（通常是 window）。

function showThis() {
    console.log(this); // 指向全局对象（window）
}

showThis();

const obj = {
    displayThis: function() {
        console.log(this); // 指向obj对象
    }
};

obj.displayThis();

3. 构造函数

在构造函数中，this 指向当前类的实例。

function Person(name) {
    this.name = name;
}

const person1 = new Person('John');
console.log(person1.name); // 输出 'John'

4. 箭头函数

箭头函数没有自己的 this，其 this 指向创建时的上下文。

const showThisArrow = () => {
    console.log(this); // 指向创建时的上下文，通常是全局对象（window）
};

showThisArrow();

5. call / apply / bind

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

function greet() {
    console.log(`Hello, ${this.name}`);
}

const person = { name: 'Alice' };

// 使用 call
greet.call(person); // 输出 'Hello, Alice'

// 使用 apply
greet.apply(person); // 输出 'Hello, Alice'

// 使用 bind
const greetPerson = greet.bind(person);
greetPerson(); // 输出 'Hello, Alice'