JavaScript之深入理解this

2023-11-28 06:21:59

this的概念

在JavaScript中，this是一个非常重要的概念，它代表着函数运行时自动生成的内部对象，即调用函数的那个对象。this的值由函数调用方式决定，它不能在执行期间赋值来设置，它在每次执行下可能都有不同的值。

在全局执行环境中，this一直指向全局对象（global object）。当函数在全局执行环境中执行时，this的值就是全局对象。例如：

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

myFunction(); // 输出：window

在上面的例子中，myFunction()函数在全局执行环境中执行，因此this的值是全局对象window。

当函数作为对象的方法调用时，this的值就是该对象。例如：

var person = {
  name: "John Doe",
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // 输出：John Doe

在上面的例子中，person.greet()方法作为person对象的方法调用，因此this的值是person对象。

当函数作为构造函数调用时，this的值是新创建的对象。例如：

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

var person = new Person("John Doe");

console.log(person.name); // 输出：John Doe

在上面的例子中，Person()函数作为构造函数调用，因此this的值是新创建的person对象。

this的用法

this可以用来访问函数内部的对象属性和方法。例如：

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

  this.greet = function() {
    console.log(this.name);
  };
}

var person = new Person("John Doe");

person.greet(); // 输出：John Doe

在上面的例子中，this.name和this.greet()分别用来访问person对象的name属性和greet()方法。

this还可以用来调用函数内部的另一个函数。例如：

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

  this.greet = function() {
    console.log(this.name);
  };

  this.sayHello = function() {
    this.greet();
  };
}

var person = new Person("John Doe");

person.sayHello(); // 输出：John Doe