探寻js中的this：解码隐藏的含义和作用范围

2023-09-17 18:56:36

在JavaScript的世界里，this是一个独特而重要的，它在不同的场景下具有不同的含义和作用范围。深入理解this的含义和用法对于编写出高质量、可维护的代码至关重要。

一、全局this：指向window对象

在全局作用域中，this指向window对象。这意味着您可以使用this来访问window对象的属性和方法。例如：

console.log(this.location); // 输出当前页面的URL
this.alert("Hello World!"); // 弹出一个警报框

二、函数内部的this：取决于调用方式

当一个函数作为普通函数被调用时，this指向全局对象window。但是，当一个函数作为对象的方法被调用时，this指向该对象。这种行为称为方法调用 。

function greet() {
  console.log(this.name); // this指向全局对象window，因此输出undefined
}

greet(); // 输出undefined

const person = {
  name: "John",
  greet: function() {
    console.log(this.name); // this指向对象person，因此输出"John"
  }
};

person.greet(); // 输出"John"

三、对象里的this：指向对象本身

在对象内部，this指向对象本身。这意味着您可以使用this来访问对象自身的属性和方法。

const person = {
  name: "John",
  greet: function() {
    console.log(this.name); // this指向对象person，因此输出"John"
  }
};

person.greet(); // 输出"John"

四、常见问题和陷阱

1. 箭头函数中的this

箭头函数（也称为lambda函数）没有自己的this。这意味着箭头函数内部的this与函数被定义时的this相同。

const person = {
  name: "John",
  greet: () => {
    console.log(this.name); // this指向全局对象window，而不是对象person
  }
};

person.greet(); // 输出undefined

2. 事件处理函数中的this

在事件处理函数中，this指向触发事件的元素。

document.addEventListener("click", function() {
  console.log(this); // this指向触发click事件的元素
});

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

bind()、call()和apply()方法可以改变函数的this指向。

const person = {
  name: "John"
};

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

const boundGreet = greet.bind(person); // 将greet函数的this绑定到对象person
boundGreet(); // 输出"John"

greet.call(person); // 将greet函数的this显式设置为对象person
greet.apply(person); // 与call()类似，但参数以数组的形式传入