数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法律学TypeScript 中这个关键字有什么用？
“this”关键字是 TypeScript 中最常用的关键字之一。对于初学者来说，理解这个关键字的工作原理可能比较复杂，但通过本教程，他们将学会如何使用它。在本教程中，我们将学习如何在 TypeScript 中使用 this 关键字。
语法
用户可以遵循以下语法来使用这个关键字。用户可以观察我们如何使用 this 关键字访问变量或调用方法。
this.var_name; this.method_name(); console.log(this.var_name);
在 TypeScript 中，如果 this 关键字没有在任何类或方法内部使用，则它指的是全局对象。即使我们在函数内部使用 this 关键字，它也指的是全局对象，即 window 对象。此外，我们可以在类方法的回调函数内部使用 this 关键字。
下面，我们将学习在不同场景下如何使用 this 关键字。
示例 1
在下面的示例中，我们创建了一个名为 demo 的类，其中包含属性 'y'。此外，我们在 demo 类内部定义了 display() 方法。display() 方法打印包含属性 y 值的消息。这里需要注意的是，我们使用 this 关键字访问属性 y。在 display() 方法中，this 关键字指的是 demo 类。
之后，我们创建了 demo 类的对象并调用了 display() 方法，并以 demo_object 作为引用，它打印了输出中显示的消息。
// 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();
编译后，它将生成以下 JavaScript 代码：
// 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() 方法内部，使用 this 关键字访问车辆类型并将其与消息一起打印。
步骤 3 − 创建 car 类，它扩展了 Vehicle 类。这意味着 car 是子类，而 Vehicle 是父类。这里，car 类是 Vehicle 类的子类，这意味着 Vehicle 类中的所有方法和属性都虚拟地复制到 car 类中，并且我们可以使用 car 类的对象访问它们。
步骤 4 − 使用 this 关键字定义 show_message() 方法，它调用 car 类的 show_type() 方法。
示例 2
在这个示例中，this 关键字指的是 car 类。由于 show_type() 虚拟地复制到 car 类中，因此我们可以使用 this 关键字访问它。简单来说，我们使用 this 关键字访问了父类的方法到子类。
// 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();
编译后，它将生成以下 JavaScript 代码：
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() 方法内部，我们使用 this 关键字访问对象属性。这里，this 关键字指的是当前对象。之后，我们以 obj 作为引用调用了 test() 方法，并将方法返回的字符串存储到 message 变量中。
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);
编译后，它将生成以下 JavaScript 代码：
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
在下面的示例中，我们创建了 test 类并定义了月份的数字数组。之后，我们使用 filter() 方法过滤所有大于 7 的月份。我们将回调函数作为 filter() 方法的第一个参数，并将 this 关键字作为第二个参数传递。
我们在 filter() 方法的回调函数内部使用 this 关键字访问了类的 value 属性。我们可以从这个示例中学习如何在回调函数内部使用 this 关键字。
// 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);
编译后，它将生成以下 JavaScript 代码：
// 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 关键字。“this”关键字指的是我们使用的对象或类。但是，我们可以将 this 关键字用作全局对象，但这并不是好的做法。因此，建议在特定的作用域内使用 this 关键字，例如对象或类。
7K+ 浏览量
