javaScript中this关键字的含义
2024-01-18 本文已影响0人
喔牛慢慢爬
在JavaScript中，this 关键字是一个非常灵活且上下文相关的引用，它代表了当前执行上下文中的对象，只有在运行的时候才能确定this的值。以下是this 在不同场景下的指向：
- 全局作用域或函数脚本：
- 如果
this出现在非严格模式的全局作用域中，它将指向全局对象（浏览器环境下是 window 对象，在Node.js环境中是 global 对象）。 - 如果
this出现在严格模式('use strict')下，全局作用域中的this会指向undefined。
- 函数调用：
- 当函数作为普通函数调用时，
this同样指向全局对象（非严格模式），严格模式下为undefined。
function getPersionName() {
console.log(this)
}
getPersionName()
- 方法调用：
- 当函数作为某个对象的方法被调用时，
this指向调用该方法的对象。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
// 创建Person类的一个实例
const john = new Person('John Doe', 30);
// 调用实例方法
john.sayHello();
- 构造函数调用：
- 使用
new关键字调用函数时，函数内部的this将指向新创建的实例对象。
function Person(name) {
this.name = name;
}
const p = new Person('xiaoming');
console.log(p.name);
- 事件处理函数：
- 在HTML元素的事件处理器中，
this指向触发事件的元素。
<button id="post">Post请求</button>
var _postItem = document.getElementById("post")
_postItem.addEventListener('click', function(){
console.log('点击进行Post请求')
});
- 内置函数的调用：
- 对于定时器回调
(setTimeout, setInterval)、Promise回调等，this默认指向全局对象（非严格模式）。但在异步编程中，通常需要使用.bind()方法或者箭头函数来保持与调用上下文的关联。
- 箭头函数：
- 箭头函数没有自己的
this，其this值继承自封闭词法作用域（即外层作用域），无论箭头函数在哪里被调用，this的值都是固定的。
- Function.prototype.call/apply/bind：
- 这些方法可以显式地改变函数调用时
this的指向。
总结来说：this 的值取决于函数调用的方式和环境，而非函数定义的位置。因此，在编写代码时需要注意函数执行的具体情境，以确保正确理解并使用 this。
