資料結構
網路
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+ 瀏覽量
