如何在 JavaScript 函数中传递对象作为参数？

在本教程中，我们将学习如何在 JavaScript 函数 中传递对象作为参数。

JavaScript 的数据类型之一由 对象类型 表示。它用于存储键控集合以及更复杂的实体。可以使用 Object() 函数或对象初始化器/字面量语法来创建对象。

几乎所有 JavaScript 对象都是 Object 的实例；一个典型的对象继承自 Object.prototype 的属性（包括方法），尽管这些属性可能会被隐藏（也称为覆盖）。

以下是用于在 JavaScript 函数中传递对象作为参数的方法。

使用字面量对象表示法

这非常简单。您只需将用 ':' 分隔的键值对放在一对花括号 () 中，您的对象就可以使用了。

我们可以将对象传递给 JavaScript 函数，但参数的名称必须与对象属性名称相同。

语法

function areaOfRectangle({ l,b }) {
   return l * b;
}
let rectangle = {
   l: 22,
   b: 10
};
areaOfRectangle(rectangle);

矩形对象接收矩形的长和宽作为输入，当此对象作为参数传递给 areaofRectangle() 函数时，计算其面积。

示例

在这个示例中，使用字面量对象表示法创建了 rectangle 对象。矩形的长和宽传递到此对象中。我们创建 areaOfRectangle() 函数来计算矩形的面积。调用此函数，并将矩形对象传递给它。

<html>
<body>
   <p id="result"></p>
   <script>
      let output = document.getElementById("result");

      // define a function
      function areaOfRectangle({l, b}) {
         return (l * b);
      }

      // define an object
      let rectangle = {l: 77, b: 21 };

      // Call the function passing the object to fucntion as parameter.
      let area = areaOfRectangle(rectangle);

      output.innerHTML = "Area of rectangle : " + area + "<br>";
   </script>
</body>
</html>

使用 this 和原型

与其他语言相比，JavaScript 函数中的“this”关键字的行为略有不同。它还区分严格模式和非严格模式。

此值通常由函数的调用方式（运行时绑定）决定。它不能在执行期间设置，并且每次调用函数时都可能不同。bind() 方法可以更改函数的 this 值，无论它如何被调用，箭头函数没有它们的绑定（它保留封闭词法上下文的 this 值）。

JavaScript 对象通过使用原型相互继承特性。本文将解释原型、原型链的工作原理以及如何为对象设置原型。

语法

var func = function(param1) {
   this.param1 = param1;
};
func.prototype.display = function() {
   return this.param1;
};

函数 func() 接受参数 param，该参数传递给 display 函数以显示其值。

示例

在示例中，我们在变量 res 中创建了一个对象。此变量使用参数 11.98 调用函数 func()。要创建对象，请将 new 关键字与 Object() 函数结合使用，然后向此对象添加属性。此函数将参数作为对象传递，并帮助使用 display() 函数显示它。

<html>
<body>
   <script>
      var func = function(param1) {
         this.param1 = param1;
      };
      func.prototype.display = function() {
         return this.param1;
      };
      function display(val) {
         document.write(val());
      }
      var res = new func(11.98);
      display(res.display.bind(res));
   </script>
</body>
</html>

在本教程中，我们学习了两种在 JavaScript 函数中传递对象作为参数的技术。第一种技术是使用一个对象，其参数的名称必须与对象属性名称相同。第二种技术是使用“this”函数和原型方法。

更新于：2023年9月13日

33K+ 次浏览

启动你的 职业生涯

完成课程获得认证

开始学习
广告