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

更新于: 2022-07-14

2K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告