js的this指向

在JavaScript中，this 是一个特殊的变量，它引用了调用对象。它的指向在不同的上下文中有不同的变化。以下是一些常见的 this 指向的情况：

1.全局上下文：在全局作用域中，this 指向全局对象。在浏览器中，这通常是 window 对象。

console.log(this); // window (在浏览器中)

2.函数调用：当一个函数被调用时，this 通常指向全局对象。但如果你在一个对象的方法内部调用该方法，那么 this 指向该对象。

function myFunction() {  
  console.log(this);  
}  
  
myFunction(); // window (在浏览器中)  
  
const myObject = {  
  myMethod: function() {  
    console.log(this);  
  }  
};  
  
myObject.myMethod(); // myObject

3.构造函数：当一个函数被用作构造函数（通过 new 关键字）时，this 指向新创建的对象。

function MyConstructor() {  
  this.property = 'value';  
  console.log(this); // 新创建的对象  
}  
  
const myInstance = new MyConstructor(); // { property: 'value' }

4.事件监听器：在事件监听器中，this 通常指向被触发事件的元素。

button.addEventListener('click', function() { console.log(this); // 触发事件的按钮元素 });

button.addEventListener('click', function() {  
  console.log(this); // 触发事件的按钮元素  
});

5.箭头函数：箭头函数不会创建自己的 this 上下文，所以它继承自包围它的函数的 this 值。这意味着如果你在一个对象的方法中使用箭头函数，那么 this 将指向该对象。

const myObject = {  
  myMethod: function() {  
    const arrowFunction = () => {  
      console.log(this); // myObject，而不是全局对象或事件元素等。  
    };  
    arrowFunction();  
  }  
};

6.绑定和call/apply/bind：你可以使用 Function.prototype.bind、call、apply 或 Function.prototype.bind() 方法来明确地设置函数的 this 值。这允许你选择函数运行时的上下文。例如：

function myFunction() {  
  console.log(this);   
}  
  
const boundFunction = myFunction.bind({ property: 'value' }); // 绑定到特定对象上  
boundFunction(); // { property: 'value' }，而不是全局对象或其他。

7.一个箭头函数（外层函数）内部还有另一个箭头函数，那么内部函数的this值将继承自外部函数。这意味着内部函数的this值将指向外部函数的上下文。

const outerObject = {  
  property: 'outer',  
  method: function() {  
    const innerFunction = () => {  
      console.log(this.property); // 继承自外部函数的上下文  
    };  
    innerFunction();  
  }  
};  
  
outerObject.method(); // 输出 "outer"

在上面的示例中，method是一个对象的方法，它包含一个箭头函数innerFunction。当innerFunction被调用时，它的this值将继承自method函数，即指向outerObject。因此，通过this.property访问的是outerObject的属性，输出为"outer"。