JS 探索函数中的 this 指针

2023-12-15 11:55:49

this 指针的理解

在 JavaScript 中，this 指针指向当前执行代码的对象，它是一个动态值，在函数执行时确定。this 指针的用法类似于其他编程语言中的 self 或 this ，但它有一些独特的行为和特性。

1. 函数中的 this

当一个函数被调用时，this 指针会被自动绑定到该函数的执行上下文对象。执行上下文对象可能是全局对象、函数对象或某个对象，具体取决于函数的调用方式。

例如：

function printName() {
    console.log(this.name);
}

const person = {
    name: "John Doe"
};

person.printName(); // 输出 "John Doe"

在这个例子中，当我们调用 person.printName() 时，this 指针被绑定到 person 对象，因为函数 printName() 是作为 person 对象的方法被调用的。因此，当我们调用 console.log(this.name) 时，它会输出 person 对象中的 name 属性值，即 "John Doe"。

2. 全局上下文中的 this

当一个函数在全局上下文中被调用时，this 指针会被绑定到全局对象，也就是 window 对象。

例如：

function printName() {
    console.log(this.name);
}

printName(); // 输出 "undefined"

在这个例子中，当我们调用 printName() 时，this 指针被绑定到 window 对象，因为函数 printName() 是在全局上下文中调用的。由于 window 对象没有 name 属性，因此当我们调用 console.log(this.name) 时，它会输出 undefined。

this 指针的妙用

1. 方法调用

this 指针可以用于调用对象的方法。例如：

const person = {
    name: "John Doe",
    printName: function() {
        console.log(this.name);
    }
};

person.printName(); // 输出 "John Doe"

2. 事件处理函数

this 指针可以用于事件处理函数中。例如：

const button = document.getElementById("button");

button.addEventListener("click", function() {
    console.log(this);
});

在这个例子中，当我们点击 button 时，this 指针会被绑定到 button 元素。因此，当我们调用 console.log(this) 时，它会输出 button 元素。

this 指针的注意事项

1. 箭头函数

在箭头函数中，this 指针没有特殊的绑定规则，它总是指向其外层函数的 this 指针。

例如：

const person = {
    name: "John Doe",
    printName: () => {
        console.log(this.name);
    }
};

person.printName(); // 输出 "undefined"

在这个例子中，当我们调用 person.printName() 时，this 指针被绑定到 window 对象，因为箭头函数 printName() 是作为 person 对象的方法被调用的。由于 window 对象没有 name 属性，因此当我们调用 console.log(this.name) 时，它会输出 undefined。

2. call()、apply() 和 bind() 方法

call()、apply() 和 bind() 方法可以用来手动绑定 this 指针。

例如：

const person = {
    name: "John Doe",
    printName: function() {
        console.log(this.name);
    }
};

const button = document.getElementById("button");

button.addEventListener("click", person.printName.bind(person));