如何將JavaScript函式用作物件?
本教程將教我們如何將JavaScript函式用作物件。然而,函式、物件和陣列是JavaScript中的可變資料型別,所有可變資料型別都是物件。
JavaScript物件是一種包含鍵值對的實體。它包含唯一鍵;每個鍵都有一些值,這些值可以是任何型別。我們可以使用物件鍵來訪問物件的值。
我們可以建立一個函式,使其像物件一樣工作。下面,我們詳細解釋瞭如何將函式轉換為物件。
將JavaScript函式用作物件
在本節中,我們將學習使函式在JavaScript中像物件一樣工作的基本知識。我們可以在函式內定義變數並初始化鍵的變數值。要建立一個新物件,我們將透過在函式內部傳遞所需的引數來建立物件的例項,以初始化鍵值。
語法
使用者可以按照以下語法將函式用作物件。
普通物件的語法。
let object = {
key : value;
// other key and values
}將函式用作物件的語法。
function funcObject() {
this.key1 = "hello";
this.key2 = "world";
}
Var object = new funcObject();
let value = object.key1; // accessing the object key values引數
this − 它是JavaScript中的保留關鍵字。此關鍵字指的是當前例項的變數、物件或方法。這意味著如果我們在函式或塊內使用此關鍵字,它只引用該塊的變數。如果我們在程式碼中全域性使用此關鍵字,它將引用全域性變數。
示例
在下面的示例中,我們建立了一個函式。我們將建立該函式的例項並將其用作物件。之後,使用函式的物件,我們將訪問函式的變數,就像我們使用鍵訪問普通物件的值一樣。
<html>
<head>
<title> JavaScript User defined object </title>
</head>
<body>
<h2> JavaScript function as an object </h2>
<p> Values of the object, after using function as an object. </p>
<div id="value"> </div>
<script>
function funcObject() {
this.name = " tutorialsPoint ";
this.site = " tutorialsPoint.com ";
this.info = " A computer science portal "
}
// Creating the instance of the function to use it as an object.
let newObject = new funcObject();
let values = document.getElementById("value");
values.innerHTML = " name: " + newObject.name + ". <br/>";
values.innerHTML += "site: " + newObject.site + ". <br/>";
values.innerHTML += "info: " + newObject.info + ". <br/>";
</script>
</body>
</html>在上面的示例中,函式的工作方式與物件相同。我們訪問函式變數的方式與訪問物件鍵的值的方式相同,它會在螢幕上列印上述輸出。
在函式內新增引數和方法
在本節中,我們將向函式新增引數。使用函式的引數,我們可以透過引數初始化物件的鍵。當我們使用“new”關鍵字建立新物件時,我們將引數傳遞給物件的例項。
與建立普通物件相比,將函式用作物件具有更多優勢。當我們將引數化函式用作物件時,我們可以透過將鍵的值作為引數傳遞來建立具有不同值的新物件。如果我們使用普通物件,則需要為每個鍵重新初始化值。
語法
使用者可以按照以下語法在用作物件的函式內宣告方法。
function funcObject(param1, param2) {
this.key1 = param1;
this.key2 = param2;
this.method = function () {
// code for current method
}
}
// object of the function with arguments
let newObject = new funcObject( "hello", "world" );
newObject.method(); // invoking the method of the object示例2
在下面的示例中,我們建立了帶引數的函式。此外,該函式包含已分配給變數的方法。我們建立了匿名方法將其分配給變數。之後,我們透過傳遞引數來使用該函式建立物件的例項。
<html>
<body>
<h2> Use Javascript function as an object. </h2>
<p> Create method inside the function, initialize value of the function variable, and use it as an object. </p>
<div id="value"> </div>
<script>
function funcObject( param1, param2 ) {
this.key1 = param1;
this.key2 = param2;
this.method = function () {
return " The sum of 10 + 30 is " + ( 10 + 30 );
}
}
// Creating the instance of the function to use it as an object.
let newObject = new funcObject("hello", "world");
let values = document.getElementById("value");
values.innerHTML = " key1: " + newObject.key1 + " <br/>";
values.innerHTML += " key2: " + newObject.key2 + " <br/>";
values.innerHTML += " return value from method: " + newObject.method() + " <br/>";
</script>
</body>
</html>結論
我們學習瞭如何將函式用作物件。這裡,`this`關鍵字在建立當前函式的變數方面起著重要作用。當使用使用者定義的物件時,最好使用多個值來管理物件。此外,我們可以傳遞值來初始化鍵,只需一行程式碼即可建立新物件。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP