返回
JavaScript中this的指向,一个陌生而熟悉的老朋友
前端
2024-01-16 04:13:41
JavaScript 中的 this 指向,就像是一个贯穿始终的老朋友,它在不同的场景下,有着不同的指向。理解 this 指向,是理解 JavaScript 程序运行机制的关键。
这道菜的主料是 JavaScript 中的 this ,它决定了函数中 this 的指向,这将影响函数的行为和访问到的数据。这道菜的配料是 this 指向的四种情况,它们分别是:默认指向、隐式指向、显示指向和 new 指向。
**默认指向**
当一个函数作为普通函数调用时,this 指向全局对象,在浏览器中,this 指向 window 对象,在 Node.js 中,this 指向 global 对象。
```javascript
function sayHello() {
console.log(this); // window 或 global
}
sayHello();
隐式指向
当一个函数作为对象的方法调用时,this 指向该对象。
const person = {
name: 'John',
sayHello: function() {
console.log(this.name); // John
}
};
person.sayHello();
显示指向
可以使用 call()、apply() 或 bind() 方法来显示地设置函数的 this 指向。
const person = {
name: 'John'
};
const sayHello = function() {
console.log(this.name);
};
sayHello.call(person); // John
sayHello.apply(person); // John
const boundSayHello = sayHello.bind(person);
boundSayHello(); // John
new 指向
当一个函数使用 new 关键字调用时,this 指向一个新创建的对象,该对象是该函数的实例。
function Person(name) {
this.name = name;
}
const person = new Person('John');
console.log(person.name); // John
最后,我们用实际的代码演示如何烹饪这道菜,体会 this 指向的美味。
// 创建一个对象
const person = {
name: 'John',
sayHello: function() {
console.log(this.name); // John
}
};
// 调用对象的 sayHello 方法
person.sayHello();
// 使用 call() 方法显示地设置 sayHello 方法的 this 指向
sayHello.call(person); // John
// 使用 apply() 方法显示地设置 sayHello 方法的 this 指向
sayHello.apply(person); // John
// 使用 bind() 方法显示地设置 sayHello 方法的 this 指向
const boundSayHello = sayHello.bind(person);
boundSayHello(); // John
// 使用 new 关键字创建一个 Person 对象
const person = new Person('John');
// 访问 Person 对象的 name 属性
console.log(person.name); // John
通过这道菜,我们体会到了 JavaScript 中 this 指向的魅力。掌握 this 指向,可以帮助我们更好地理解 JavaScript 程序的运行机制,并编写出更健壮的代码。