JavaScript 对象定义的规则是什么？

在本教程中，我们将讨论在 JavaScript 中对象定义需要遵循的规则。

JavaScript 是一种面向对象的脚本语言。对象包含许多属性。属性由键和值组成。当这个值是一个函数时，属性被称为方法。

浏览器中提供了预定义的对象。我们也可以定义自己的对象。杯子就是一个现实生活中对象的例子。颜色、设计、重量和材质是杯子的主要属性。

对象名称和属性名称区分大小写。要定义属性，我们需要为属性赋值。

现在我们将了解定义对象的规则。

使用关键字“new”

规则

  • 声明对象名称，并在对象名称和 new Object() 之间添加等号。

  • 使用点运算符定义键。

  • 使用等号赋值。

  • 字符串值需要用引号括起来。

我们可以遵循以下语法使用此方法定义对象。

语法

const objCar = new Object();
objCar.brand = 'Alto';
objCar.model = 'Model';
objCar.year = 1970;

这里，objCar 是对象，brand、model 和 year 是其属性。

示例

在这个例子中，我们使用关键字 new 来定义对象，并向用户显示对象创建的每个步骤。

Open Compiler
<html>
<head>
   <script type="text/javascript">
      function getObjDefNew()
      {
         var objDefBtnWrap = document.getElementById("objDefBtnWrap");
         var objDefPre = document.getElementById("objDefPre");
         var objDefStr = "";
         const objNew = new Object();
         objDefStr += JSON.stringify(objNew) + "<br>";
         objNew.newkey1 = 'New Value 1';
         objDefStr += JSON.stringify(objNew) + "<br>";
         objNew.newkey2 = 'New Value 2';
         objDefStr += JSON.stringify(objNew) + "<br>";
         objDefPre.innerHTML = "<b>Object creation steps using new keyword</b><br><br>" +objDefStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i> the keyword new</i></h2>
   <div id="objDefBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjDefNew()">Click Me</button>
   </div>
   <pre id="objDefPre"></pre>
</body>
</html>

使用对象字面量

我们也可以使用对象初始化器来定义对象。对象初始化器用逗号分隔键值对，并将所有内容括在花括号中。

规则

  • 声明对象名称，并在左花括号前放一个等号 (=)。
  • 添加左花括号 ({)。
  • 使用冒号 (:) 定义每个键值对。
  • 用逗号 (,) 分隔每个键值对。
  • 用右花括号 (}) 关闭对象定义。

我们可以遵循以下语法使用此方法定义对象。

语法

const objCar = {
   brand: 'Alto',
   model: 'M1',
   year: 1970
};

这里我们使用对象初始化器格式创建对象 objCar。

示例

在这个例子中，我们使用对象字面量来定义对象，并向用户显示对象创建的每个步骤。

Open Compiler
<html>
<head>
   <script type="text/javascript">
      function getobjLit()
      {
         var objLitBtnWrap = document.getElementById("objLitBtnWrap");
         var objLitPre = document.getElementById("objLitPre");
         const objLit = {
            litkey1: 'litval1',
            litkey2: 'litval2'
         };
         objLitPre.innerHTML = "<b>The object definition steps with the literals</b><br><br>" + JSON.stringify(objLit);
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the object literal</i></h2>
   <div id="objLitBtnWrap">
      <p>Click the button</p>
      <button onclick="getobjLit()">Click Me</button>
   </div>
   <pre id="objLitPre"></pre>
</body>
</html>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

使用构造函数

规则

  • 构造函数的名称必须与对象名称相同。
  • 要引用对象，应使用“this”运算符。
  • 等号 (=) 后应给出每个键的值。
  • 构造函数中不要使用任何 return 语句。

我们可以遵循以下语法使用此方法定义对象。

语法

function Car(brand, model, year)
{
   this.brand = brand;
   this.model = model;
   this.year = year;
}
var objCar1 = new Car('C1', 'M1', 'Y1');
var objCar2 = new Car('C2', 'M2', 'Y2');

这里我们使用 new 关键字和 this 关键字来创建对象。

示例

在这个例子中，我们使用构造函数来定义对象，并向用户显示对象创建的每个步骤。

Open Compiler
<html>
<head>
   <script type="text/javascript">
      function getObjConst()
      {
         var objConstBtnWrap = document.getElementById("objConstBtnWrap");
         var objConstPre = document.getElementById("objConstPre");
         var objConstStr = "";
         function objConst(constval1, constval2)
         {
            this.constkey1 = constval1;
            this.constkey2 = constval2;
         }
         var objConst1 = new objConst('constval1', 'constval2');
         objConstStr += JSON.stringify(objConst1) + "<br>";
         var objConst2 = new objConst('constval3', 'constval4');
         objConstStr += JSON.stringify(objConst2) + "<br>";
         objConstPre.innerHTML = "<b>Object creation steps using constructor</b><br><br>" +objConstStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the constructor function</i></h2>
   <div id="objConstBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjConst()">Click Me</button>
   </div>
   <pre id="objConstPre"></pre>
</body>
</html>

使用 Object 的 create 方法

我们可以使用此方法，因为它允许我们访问对象的原型。

规则

  • 应使用对象初始化语法添加键值和方法。
  • Object 的 create 方法的对象名称和参数名称必须相同。

语法

我们可以遵循以下语法使用此方法定义对象。

const Animal = {
   type: 't1',
   viewType() {
      console.log(this.type);
   }
};
const a1 = Object.create(Animal);
a1.viewType();//t1
const a2 = Object.create(Animal);
a2.type = 't2';
a2.viewType();//t2

这里我们使用对象初始化格式和 Object 的 create 方法来定义对象。

示例

在这个例子中，我们使用 Object 的 'create' 方法来定义对象，并向用户显示对象创建的每个步骤以及对象函数的输出。

Open Compiler
<html>
<head>
   <script type="text/javascript">
      function getObjCreat()
      {
         var objCreatBtnWrap = document.getElementById("objCreatBtnWrap");
         var objCreatPre = document.getElementById("objCreatPre");
         var objCreatStr = "";
         const objCreat = {
            creatkey1: 'creatval1',
            creatFunction() {
               objCreatStr += "<b>Inside the Object's Function</b><br><br>" + this.creatkey1 + "<br><br>";
            }
         };
         objCreatStr += JSON.stringify(objCreat) + "<br><br>";
         const objCreat1 = Object.create(objCreat);
         objCreat1.creatFunction();
         const objCreat2 = Object.create(objCreat);
         objCreat2.creatkey1 = 'creatval2';
         objCreatStr += JSON.stringify(objCreat2) + "<br><br>";
         objCreat2.creatFunction();
         objCreatPre.innerHTML = "<b>Output</b><br><br>" +objCreatStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the create method</i></h2>
   <div id="objCreatBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjCreat()">Click Me</button>
   </div>
   <pre id="objCreatPre"></pre>
</body>
</html>

在本教程中，我们学习了四种定义对象的方法，并了解了现在定义对象的规则。在我们这里提到的四种方法中，new 关键字方法更方便编写代码。

更新于：2022年10月31日

300 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告