js this的理解|极客笔记

js this的理解

在JavaScript中，this 是一个很重要的概念，它代表当前函数执行上下文中的对象。在不同的情况下，this 的指向可能会不同，导致新手经常会对其产生困惑。本文将详细解释this 的指向规则，并且提供一些示例来帮助读者更好地理解。

全局上下文中的 this

在全局执行上下文中，this 指向全局对象（浏览器环境下通常是window对象）。

console.log(this === window); // true

function logThis() {
  console.log(this === window);
}

logThis(); // true

函数上下文中的 this

在函数执行上下文中，this 的指向取决于函数是如何被调用的。

普通函数

对于普通函数，this 的指向由调用时的对象决定。

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

myFunc(); // window

const obj = {
  myMethod: myFunc
};

obj.myMethod(); // obj

箭头函数

箭头函数不会改变this 的指向，它会继承外层作用域中的this 值。

const obj = {
  myMethod: () => {
    console.log(this);
  }
};

obj.myMethod(); // window

构造函数中的 this

当一个函数被用作构造函数来创建对象时，this 指向新创建的实例。

function Person(name) {
  this.name = name;
}

const person = new Person('Alice');
console.log(person.name); // Alice

DOM 事件处理函数中的 this

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

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // <button>
});

显式绑定 this

有时候我们希望显式地指定this 的值，可以使用call、apply 或bind 方法。

call：立即调用函数，并将指定的对象作为函数的上下文。

function greet() {
  console.log(`Hello, ${this.name}`);
}

const obj = { name: 'Alice' };
greet.call(obj); // Hello, Alice

apply：类似于call，但是接受一个参数数组。

function greet(greeting) {
  console.log(` ${greeting},$ {this.name}`);
}

const obj = { name: 'Bob' };
greet.apply(obj, ['Good morning']); // Good morning, Bob

bind：返回一个新函数，永久绑定指定的对象作为函数的上下文。

function greet() {
  console.log(`Hello, ${this.name}`);
}

const obj = { name: 'Carol' };
const boundGreet = greet.bind(obj);
boundGreet(); // Hello, Carol

箭头函数和 this

如之前所述，箭头函数不会改变this 的指向，通常会继承外层作用域的this 值。这使得箭头函数在处理回调函数时非常方便。

const obj = {
  name: 'David',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.greet(); // Hello, David

总结

this 的指向是动态的，取决于函数的调用方式。在全局上下文中，this 指向全局对象；在函数上下文中，this 的指向由调用时的对象决定；在构造函数中，this 指向新创建的实例；在箭头函数中，this 指向外层作用域中的this 值。掌握this 的指向规则对于编写高质量的JavaScript代码非常重要。