this关键字的简明指南与理解

news2025/1/10 16:19:40

this关键字是执行上下文中的一个属性，它主要用在函数内部，指向最后一次调用该函数的对象。然而，this 的值并不是在函数定义时确定的，而是在函数被调用时根据函数的调用方式动态绑定的。以下是对 this 的一些相关理解。

一、this的理解

1. 全局上下文中的 `this`

在全局上下文中，就是不在任何函数内部，this 指向全局对象。在浏览器环境中，全局对象是 window；在 Node.js 环境中，全局对象是 global。

console.log(this);
console.log(this === window); // 在浏览器中为 true 
console.log(this === global); // 在 Node.js 中为 true

2. 函数上下文中的 `this`

（1）非严格模式

在普通函数中，this 的值取决于函数是如何被调用的。

一个函数作为一个对象的方法来调用，this指向这个对象。

let obj = {
    name: 'obj',
    fn: function (){
        console.log(this);
    } 
}
obj.fn();

作为普通函数被调用或直接调用函数名，this 指向全局对象（在浏览器中为 window，在 Node.js 中为 global）。

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

（2）严格模式

在严格模式下，如果 this 没有被显式设置，例如通过 call()、apply() 或 bind()，则 this 的值会是 undefined。

3. 箭头函数中的 `this`

箭头函数不绑定自己的 this，它会捕获其所在上下文的 this 值，作为自己的 this 值。所以在箭头函数中，this 的值是基于函数或全局上下文来确定的。

const obj3 = { 
    method: function() { 
        console.log(this); // obj 
        const arrowFunc = () => { 
            console.log(this); // obj，箭头函数继承外围函数的this 
        }; 
        arrowFunc(); 
    } 
}; 
obj3.method();

4. 构造函数中的 `this`

在构造函数中，通过new运算符创建的函数调用，this指向新创建的对象实例。

function Person(name) {
    this.name = name;
}
let person = new Person('Alice');
console.log(person);

二、改变this的指向

在JavaScript中，call、apply和bind方法都是用来改变函数执行时this的指向的。下面解释这三个方法中的this行为。

1. `call` 方法

call方法允许调用一个函数，接收参数第一个是this绑定的对象，后面的参数是传入函数执行的参数。

function greet(greeting, punctuation) { 
    console.log(greeting + ', ' + this.name + punctuation); 
} 
const man = { 
    name: 'Alice' 
}; 
greet.call(man, 'Hello', '!'); // 输出: Hello, Alice!

//这个例子中，greet.call(person, 'Hello', '!')调用了greet函数，并将this在greet函数体内部设置为person对象

2. `apply` 方法

apply方法的作用与call方法类似，也是调用一个函数，接受两个参数：第一个参数是this的绑定的对象，第二个参数是一个数组（或类数组对象），该数组的元素将作为单独的参数传给函数。

function greet1(greeting, punctuation) { 
    console.log(greeting + ', ' + this.name + punctuation); 

} 
const man1 = { 
    name: 'Bob' 
}; 
greet1.apply(man1, ['Hi', '.']); // 输出: Hi, Bob.

//这个例子中，greet.apply(person, ['Hi', '.'])调用了greet函数，并将this在greet函数体内部设置为person对象，同时传入了两个参数'Hi'和'.'

3. `bind` 方法

与call和apply不同，bind方法不会立即执行函数，而是返回一个新的函数。这个新函数在被调用时，其this值被指定为bind方法的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function greet(greeting, punctuation) { 
    console.log(greeting + ', ' + this.name + punctuation); 
} 
const man2 = { 
    name: 'Charlie' 
}; 
const boundGreet = greet.bind(man2, 'Howdy'); 
boundGreet('!'); // 输出: Howdy, Charlie!

//这个例子中，greet.bind(person, 'Howdy')创建了一个新的函数boundGreet，其this值被绑定为person对象，并且'Howdy'作为第一个参数被预置。当boundGreet被调用时，'!'作为第二个参数传入，与'Howdy'一起被greet函数处理

注意：.bind()表示创建一个新函数，并不会调用任何函数，所以要自己调用一遍