TypeScript this 关键字的用途是什么

“this “关键字是TypeScript中最常用的关键字之一。对于初学TypeScript的程序员来说，要理解这个关键词的工作原理是很复杂的，但在本教程结束时他们会学会。在本教程中，我们将学习如何在TypeScript中使用这个关键字。

语法

用户可以按照下面的语法来普遍使用这个关键字。用户可以观察我们如何使用这个关键字来访问变量或调用方法。

this.var_name;
this.method_name();
console.log(this.var_name);

在TypeScript中，如果不在任何类或方法中使用，这个关键词指的是全局对象。即使我们在函数里面使用这个关键词，它也指的是全局的意思是窗口对象。另外，我们可以在类方法的回调函数里面使用这个关键词。

下面，我们将学习在不同情况下使用这个关键词。

示例 1

在下面的例子中，我们已经创建了demo类，其中包含了’y’属性。同时，我们在演示类中定义了display()方法。display()方法打印出带有属性y值的信息。这里，重要的是我们使用这个关键字访问属性y。在display()方法中，这个关键字指的是demo类。

之后，我们创建了demo类的对象，并以demo_object为参考调用了display()方法，该方法打印出了输出中显示的信息。

// Creating the demo class
class demo {
   y = 10;
   // Defining the display method inside the demo class
   display() {
      console.log("This is display method of demo class ");
      console.log("The Value of the Property y of the demo class is " + this.y)
   }
}
// Creating the object of the demo class
var demo_object = new demo();

// Invoke the object of the demo class
demo_object.display();

// Creating the demo class
var demo = /** @class */ (function () {
   function demo() {
      this.y = 10;
   }
   // Defining the display method inside the demo class
   demo.prototype.display = function () {
      console.log("This is display method of demo class ");
      console.log("The Value of the Property y of the demo class is " + this.y);
   };
   return demo;
}());
// Creating the object of the demo class
var demo_object = new demo();

// Invoke the object of the demo class
demo_object.display();

输出

上述代码将产生以下输出 —

This is display method of demo class
The Value of the Property y of the demo class is 10

在下一个例子中，我们将遵循以下步骤 –

• 第1步–创建Vehicle类，其中包含vehicle_type属性和show_type()类方法。

• 第2步 – 在show_type()方法中，使用这个关键字访问车辆类型，并将其与信息一起打印出来。

• 第3步 – 创建汽车类，它扩展了车辆类。这意味着汽车是基类，而车辆是父类。在这里，汽车类是Vehicle类的基类，这意味着Vehicle类的所有方法和属性实际上都被复制到汽车类中，我们也可以使用汽车类的对象来访问它。

• 第4步 – 使用这个关键字，定义show_message()方法，它调用汽车类的show_type()方法。

示例 2

在这个例子中，这个关键字指的是汽车类。由于show_type()实际上被复制到了汽车类中，我们可以使用这个关键字来访问它。简单地说，我们使用这个关键字将父类的方法访问到子类。

// Creating the vehicle class
class Vehical {

   // Defining the vehicle_type property
   vehicle_type: string = "medium";

   // Show_type method of the Vehicle class.
   show_type() {

      console.log("This is inside the show_type method of the Vehicle class");
      console.log("The vehicle type is " + this.vehicle_type);
   }
}
// Creating the car class which is the base class of the Vehicle class.
class car extends Vehical {

   // Defining the display method inside the car class
   show_message() {
      this.show_type();
      console.log("This is show_message method of car class ");
   }
}
// Creating the object of the car class
var car_object = new car();
// Invoke the object of the demo class
car_object.show_message();

var __extends = (this && this.__extends) || (function () {
   var extendStatics = function (d, b) {
      extendStatics = Object.setPrototypeOf ||
      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
      function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
      return extendStatics(d, b);
   };
   return function (d, b) {
      extendStatics(d, b);
      function __() { 
         this.constructor = d; 
      }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
})();
// Creating the vehicle class
var Vehical = /** @class */ (function () {
   function Vehical() {
      // Defining the vehicle_type property
      this.vehicle_type = "medium";
   }
   // Show_type method of the Vehicle class.
   Vehical.prototype.show_type = function () {
      console.log("This is inside the show_type method of the Vehicle class");
      console.log("The vehicle type is " + this.vehicle_type);
   };
   return Vehical;
}());
// Creating the car class which is the base class of the Vehicle class.
var car = /** @class */ (function (_super) {
   __extends(car, _super);
   function car() {
      return _super !== null && _super.apply(this, arguments) || this;
   }
   // Defining the display method inside the car class
   car.prototype.show_message = function () {
      this.show_type();
      console.log("This is show_message method of car class ");
   };
   return car;
}(Vehical));
// Creating the object of the car class
var car_object = new car();

// Invoke the object of the demo class
car_object.show_message();

输出

上述代码将产生以下输出 —

This is inside the show_type method of the Vehicle class
The vehicle type is medium
This is show_message method of car class

示例 3

在这个例子中，我们在TypeScript中创建了普通对象。我们在对象中定义了website_name和language属性。此外，我们还定义了test()方法，它返回字符串。

在test()方法里面，我们用这个关键词来访问对象的属性。这里，这个关键字指的是当前对象。之后，我们通过将obj作为一个引用来调用test()方法，并存储字符串，该方法将其返回到消息变量中。

var obj = {
   // Defining the object properties
   website_name: "TutorialsPoint",
   language: "TypeScript",

   // Defining the test() method for the object
   test(): string {
      return (
         this.website_name +
         " is a best website to learn " +
         this.language +
         " Programming language."
      );
   },
};
// call the test() method obj and store return value to message.
let message: string = obj.test();

// printe the message
console.log(message);

var obj = {
   // Defining the object properties
   website_name: "TutorialsPoint",
   language: "TypeScript",

   // Defining the test() method for the object
   test: function () {
      return (this.website_name +
      " is a best website to learn " +
      this.language +
      " Programming language.");
   }
};
// call the test() method obj and store return value to message.
var message = obj.test();

// printe the message
console.log(message);

输出

上述代码将产生以下输出 —

TutorialsPoint is a best website to learn TypeScript Programming language.

示例 4

在下面的例子中，我们已经创建了测试类并定义了月份的数字数组。之后，我们使用filter()方法来过滤所有大于7的月份。我们将回调函数作为filter()方法的第一个参数，将这个关键字作为第二个参数。

我们在filter()方法的回调函数中使用了这个关键字来访问类的值属性。我们可以从这个例子中学习如何在回调函数中使用这个关键字。

// Creating the test class
class test {

// Defining the value property
value: number = 7;

// Defining the months array
months: Array<number> = [1, 4, 7, 10, 12, 6, 9];

// Filter the all months whioh are greater than 7
// Use this keyword as a pameter of the method
filtered_months = this.months.filter((month) => {
   return month > this.value;
}, this);
}
// Creting the object of the test class
let test_obj = new test();
console.log("Filtered months are " + test_obj.filtered_months);

// Creating the test class
var test = /** @class */ (function () {
   function test() {
      var _this = this;

      // Defining the value property
      this.value = 7;

      // Defining the months array
      this.months = [1, 4, 7, 10, 12, 6, 9];

      // Filter the all months whioh are greater than 7
      // Use this keyword as a pameter of the method
      this.filtered_months = this.months.filter(function (month) {
         return month > _this.value;
      }, this);
   }
   return test;
}());
// Creting the object of the test class
var test_obj = new test();
console.log("Filtered months are " + test_obj.filtered_months);

输出

上述代码将产生以下输出 —

Filtered months are 10,12,9

我们在本教程中学习了四个不同的例子，在TypeScript中使用这个关键词。”this “关键词指的是我们使用的对象或类。然而，我们可以把这个关键字作为一个全局对象来使用，但这并不是好的做法。所以，建议在一个特定的范围内使用这个关键词，比如一个对象或类。