如何将 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 关键字在创建当前函数的变量中起着重要作用。当使用用户定义的对象时,最好使用多个值来管理对象。此外,我们可以传递值来初始化键,并只需一行代码即可创建新对象。