JS中function的this指向

2023/03/19

在JavaScript中，this指向是由函数调用时上下文决定的。

一、在不同情况中调用

let obj={
  // 对象方法（简写），对象的普通方法（等价于 function()）
  walk(){
    console.log(this)  // 指向物件obj
  }

  // 传统函数 对象中的 function 声明
  walk1: function ()=>{
    console.log(this)  // 指向物件obj
  }

  // 箭头函数
  // ArrowFunctionExpression没有this關键字绑定，不應該用作Objects的methods
  walk2:()=>{
    // 指向上下文环境，看是全局作用域还是模块作用域定义的 
    console.log(this)  // 指向一个empty object,{}？undefined(严格模式)/window(浏览器)/module.exports
  }
}

// 在监听事件中
const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log(this); // 箭头函数中:this === window（或 undefined，如果在模块中）
});
button.addEventListener("click", function () {
  console.log(this); // this = button
});

二、手动改变this指向

const person = {
  name: 'Alice',
  sayHi(greeting) {
    console.log(`${greeting}, I'm ${this.name}`)
  }
}

const another = {
  name: 'Bob'
}

// 使用 call，立即执行
person.sayHi.call(another, 'Hello')  // 输出：Hello, I'm Bob

// 使用 apply，与call相同，但参数传的是array，立即执行
person.sayHi.apply(another, ['Hello'])  // 输出：Hello, I'm Bob

// 使用 bind，会返回一个新函数，但不立即执行，需要调用才执行，适合传递或保存函数引用
const boundFunc = person.sayHi.bind(another, 'Hi')
boundFunc()  // 输出：Hi, I'm Bob
bing