原生javascript中this几种常见用法总结

当在JavaScript中使用this关键字时，它的值取决于该函数如何被调用。下面总结了几种常见的this用法。

全局上下文中的this

在全局作用域中使用this，this的值是指向全局对象，这在浏览器中通常是window对象。例如：

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

函数上下文中的this

在函数作用域中使用this，this的值取决于函数的调用方式。如果使用函数名称调用函数，则this指向全局对象，如果使用点符号（对象方法）或通过call或apply调用函数，则this指向调用该函数的对象。例如：

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

example(); // Window

var obj = {
  method: example
};

obj.method(); // obj

使用call和apply方法可以显式地设置this的值。例如：

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

example.call({ name: 'John' }); // { name: 'John' }

example.apply({ age: 25 }); // { age: 25 }

构造函数中的this

在使用构造函数创建对象时，this通常是指向要创建的新对象。例如：

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

var person1 = new Person('John');
console.log(person1.name); // John

事件监听器中的this

当在事件监听器中使用this时，this指向触发该事件的元素。例如：

var button = document.querySelector('button');

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

总之，在JavaScript中使用this时需要注意如何调用函数和使用它的上下文，否则this的值可能会产生意外结果。