如何将 JavaScript 函数用作对象?

front end technologyjavascriptweb development

本教程将教我们如何将 JavaScript 函数用作对象。但是,函数、对象数组是 JavaScript 中的可变数据类型,所有可变数据类型都是对象。

JavaScript 对象是一种包含键值对的实体。它包含唯一键;每个键都有一些可以是任何类型的值。我们可以使用对象键来访问对象的值。

我们可以创建一个函数,使其表现得像一个对象。下面,我们详细说明了如何将函数转换为对象。

将 JavaScript 函数用作对象

在本节中,我们将学习使函数在 JavaScript 中作为对象工作的基本知识。我们可以在函数内部定义变量并初始化键的变量值。要创建一个新对象,我们将通过在函数内部传递初始化键值所需的参数来创建对象的实例

语法

用户可以按照以下语法将函数用作对象。

  • 普通对象的语法。

let object = {
   key : value;
   // 其他键和值
}
  • 将函数用作对象的语法。

function funcObject() {
   this.key1 = "hello";
   this.key2 = "world";
}
Var object = new funcObject();
let value = object.key1; // 访问对象键值

参数

  • 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 "
      }
      // 创建函数实例以将其用作对象。
      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 () {
      // 当前方法的代码
   }
}
// 带有参数的函数对象
let newObject = new funcObject( "hello", "world" );
newObject.method(); // 调用对象的方法

示例 2

在下面的例子中,我们创建了带参数的函数。此外,该函数包含我们分配给变量的方法。我们创建了匿名方法将其分配给变量。之后,我们通过传递参数使用该函数创建了对象的实例。

<html>
<body>
   <h2> 将 Javascript 函数用作对象。</h2>
   <p> 在函数内创建方法,初始化函数变量的值,并将其用作对象。</p>
   <div id="value"> </div>
   <script>
      function funcObject( param1, param2 ) {
          this.key1 = param1;
         this.key2 = param2;
          this.method = function () {
            return " 10 + 30 之和为 " + ( 10 + 30 );
         }
      }
      // 创建函数实例以将其用作对象。
      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 += " 从方法返回值:" + newObject.method() + " <br/>";
   </script>
</body>
</html>

总结

我们已经学会了将函数用作对象。在这里,这个关键字在创建当前函数的变量时起着重要作用。当使用用户定义对象时,最好使用多个值来管理对象。此外,我们可以传递值来初始化键,并用一行代码创建新对象。


相关文章