当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript this 关键字的用途是什么

TypeScript this 关键字的用途是什么

TypeScript this 关键字的用途是什么

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

语法

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

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

在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();
TypeScript
// 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();
TypeScript

输出

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

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

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

  • 第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();
TypeScript
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();
TypeScript

输出

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

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

示例 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);
TypeScript
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);
TypeScript

输出

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

TutorialsPoint is a best website to learn TypeScript Programming language.
TypeScript

示例 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);
TypeScript
// 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);
TypeScript

输出

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

Filtered months are 10,12,9
TypeScript

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

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册