跟我学习javascript的this关键字

当编写 JavaScript 代码时，经常会使用 this 关键字。它可以引用当前上下文中的对象，其行为特点是动态绑定。但是，该关键字在不同的上下文环境中使用可能会产生不同的结果，这常常导致初学者的困惑。本文将深入讲解 JavaScript 的 this 关键字， 帮助初学者理解并正确运用它。

1. this关键字指向全局对象

在全局环境中，使用 this 关键字会指向全局对象，即浏览器中的 window， Node.js 环境中的 global。以下是一个简单的示例：

console.log(this); //输出结果为：Window {…} 或 global {...}

在浏览器控制台中，上述代码会输出全局对象 Window。

2. this关键字指向对象

当在对象内部使用函数时， this 关键字会指向该对象。例如：

let person = {
  name: "ZhangSan",
  age: 18,
  sayHello: function() {
    console.log("Hello, I am " + this.name + ", " + this.age + " years old.");
  }
}

person.sayHello(); //输出结果为：Hello, I am ZhangSan, 18 years old.

上述代码中，this 引用了 person 对象。因此，当调用 person.sayHello() 时，this 指向该对象，输出结果为：Hello, I am ZhangSan, 18 years old.

如果在普通函数内部使用 this 关键字时， this 将指向全局对象，而非最近的对象。例如：

let person = {
  name: "ZhangSan",
  age: 18,
  sayHello: function() {
    console.log("Hello, I am " + this.name + ", " + this.age + " years old.");
  },
  sayHi: function() {
    function inner() {
      console.log("Hi, I am " + this.name); //此处的this将指向全局对象
    }
    inner();
  }
}

person.sayHi(); //输出结果为：Hi, I am undefined

上述代码中，sayHi() 函数内部使用了普通函数 inner()， 导致其中的this关键字指向了全局对象。因此，在调用 person.sayHi() 时，输出结果为：Hi, I am undefined。

为了正确地引用 this 关键字，可以使用箭头函数来代替普通函数，因为箭头函数的 this 关键字可以按照所在上下文继承上一层作用域内的 this 值，不会改变其指向。例如：

let person = {
  name: "ZhangSan",
  age: 18,
  sayHello: function() {
    console.log("Hello, I am " + this.name + ", " + this.age + " years old.");
  },
  sayHi: function() {
    let inner = () => {
      console.log("Hi, I am " + this.name); //此处的this会继承最近的person对象
    }
    inner();
  }
}

person.sayHi(); //输出结果为：Hi, I am ZhangSan

在上述代码中，已经通过箭头函数确保了inner()中的 this 关键字指向了 person 对象。因此，在调用 person.sayHi() 时，输出结果为：Hi, I am ZhangSan。

除了上述内容，还有以下内容需要注意：

• 在构造函数中，this 关键字指向新创建的对象，即构造函数的实例对象。
• 在使用 call() 或 apply() 方法调用函数时，可以以参数的形式传递一个上下文（即 this 绑定的对象）。
• 在使用 bind() 方法调用函数时，也可以指定函数内 this 的值。