JavaScript函数中的this（一）
原创JavaScript函数中的this（一）
原创
堕落飞鸟
发布于 2023-05-17 11:27:48
发布于 2023-05-17 11:27:48
代码可运行
运行总次数：0
代码可运行
在JavaScript中，关键字 this 是一个特殊的对象引用，它指向当前执行函数的上下文对象。this的值在函数被调用时确定，并且可能根据函数的调用方式和上下文的不同而变化。this的使用是非常重要的，它允许我们访问和操作当前执行函数所属的对象和环境。
this 的规则
全局上下文中的 this：在全局上下文中，this 指向全局对象（在浏览器环境中通常是 window 对象）。
console.log(this); // 输出全局对象，如 window 对象（在浏览器环境中）函数中的 this：在函数内部，this 的值取决于函数被调用的方式。
- 作为函数调用：如果函数作为普通函数调用，
this指向全局对象（在浏览器环境中通常是window对象）。
function myFunction() {
console.log(this);
}
myFunction(); // 输出全局对象，如 window 对象（在浏览器环境中）- 作为方法调用：如果函数作为对象的方法调用，
this指向调用该方法的对象。
let obj = {
name: 'John',
sayHello: function() {
console.log('Hello, ' + this.name + '!');
}
};
obj.sayHello(); // 输出 "Hello, John!"- 作为构造函数调用：如果函数作为构造函数使用
new关键字进行调用，this指向新创建的对象。
function Person(name) {
this.name = name;
}
let john = new Person('John');
console.log(john.name); // 输出 "John"- 通过
call()或apply()调用：可以使用call()或apply()方法来显式地设置函数中的this值。
function sayHello() {
console.log('Hello, ' + this.name + '!');
}
let obj = {
name: 'John'
};
sayHello.call(obj); // 输出 "Hello, John!"箭头函数中的 this：箭头函数的 this 值是在定义时确定的，它捕获了包含它的函数的 this 值。
let obj = {
name: 'John',
sayHello: function() {
setTimeout(() => {
console.log('Hello, ' + this.name + '!');
}, 1000);
}
};
obj.sayHello(); // 输出 "Hello, John!"（箭头函数捕获了 sayHello() 的 this 值）this 的使用非常重要，它允许我们访问和操作当前执行函数所属的对象和环境。通过理解 this 的规则和用法，我们可以更好地编写代码并处理不同的执行上下文。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
