JavaScript中this关键字用法实例分析

什么是this关键字？

在 JavaScript 中， this 关键字是一个特殊的关键字，用于表示当前函数的执行环境。具体来说，this是在每个函数被调用时独立绑定的，如果没有特别指定执行环境，则 this 的默认值是全局对象 window。

this关键字的用法

在 JavaScript 中，this 关键字的用法有以下几种：

1. 全局作用域中的this

在全局作用域中调用函数时，this关键字指向全局对象。例如：

console.log(this); // Window

2. 对象方法中的this

当通过对象调用方法时，this关键字将指向该对象，即当前对象的实例。例如：

var obj = {
  name: "Jack",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

obj.greet(); // 输出 "Hello, Jack"

3. 构造函数中的this

在 JavaScript 中，函数可以作为构造函数使用，通过 new 关键字创建一个新的对象实例时，this 关键字会指向该对象。例如：

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

var tom = new Person("Tom", 25);
console.log(tom.name); // 输出 "Tom"

4. apply() 和 call() 方法中的this

在 JavaScript 中，每个函数都可以通过 apply() 和 call() 方法指定执行环境，从而改变 this 关键字的指向。例如：

function greet() {
  console.log("Hello, " + this.name);
}

var obj1 = { name: "Tom" };
var obj2 = { name: "Jerry" };

greet.call(obj1); // 输出 "Hello, Tom"
greet.apply(obj2); // 输出 "Hello, Jerry"

示例说明

示例一：对象方法中的this的用法

var cat = {
    name: 'Tom',
    age: 2,
    sayHello: function() {
        console.log('Hello, my name is ' + this.name + '. I am ' + this.age + ' years old.');
    },
    getInfo: function() {
        console.log('I am a cat.');
    }
};

cat.sayHello();  // 输出 "Hello, my name is Tom. I am 2 years old."
cat.getInfo();   // 输出 "I am a cat."

在上面的示例中，我们定义了一个 cat 对象，其中包含两个方法 sayHello() 和 getInfo()，在 sayHello() 方法中使用了 this 关键字，来引用当前对象的属性值。

示例二：构造函数中的this的用法

function Car(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
    this.displayInfo = function() {
        console.log('This is a ' + this.year + ' ' + this.brand + ' ' + this.model + ' car.');
    };
}

var myCar = new Car('Tesla', 'Model 3', 2021);
myCar.displayInfo();  // 输出 "This is a 2021 Tesla Model 3 car."

在上面的示例中，我们定义了一个 Car 构造函数，使用 this 关键字定义了一些属性和方法，然后通过 new 关键字创建了一个新的对象实例 myCar，并调用了 myCar.displayInfo() 方法来输出该车的信息。