JavaScript对象详细剖析

JavaScript 不是一种成熟的面向对象编程语言，例如 Java，但它是在简单的基于对象的模型上设计的。对象是具有包含 JavaScript 变量或其他对象的属性的构造。对象还具有与其关联的函数，这些函数称为对象的方法。除了 JavaScript 核心（例如数组或数学）对象之外，您还可以定义自己的对象。

简介

由于 JavaScript 是一种松散类型、动态且富有表现力的语言，因此您可以通过多种方式完成相同的任务。本教程的目的是为您提供释放语言潜力（在创建和使用对象的上下文中）的指南，从而帮助您了解幕后发生的事情。不能说这里描述的方法是做事的唯一方法。相反，如果这能帮助您选择自己的方法，那就太好了。

JavaScript 对象、创建对象、语法

JavaScript 对象

JavaScript 中的“一切”就像一个对象，例如字符串、数字、数组、函数……，但有两个例外：null和undefined。

JavaScript：创建对象

在 JavaScript 中，创建对象的方法有很多种。您可以使用对象初始值设定项创建对象，或编写构造函数来定义对象类型并使用 new 运算符创建对象的实例。 JavaScript 的“对象初始值设定项”与 C++ 使用的术语一致。

句法

使用对象字面量 - {} 表示法，您可以创建一个普通对象：

var objectName = {}

或者

您可以通过定义属性和值来创建新对象：

var objectName = { property1 : value1, 
                   property2 : value2, 
                   //..., 
                   propertyN : valueN } ;

在哪里

objectName ：新对象的名称。

property_1, property_2, .....property_n ：标识符（名称、数字或字符串）。

value1, value2,..,valueN ：一个表达式，其值由 property_1、property_2、.....property_n 标识。

在 JavaScript 中，您可以创建新对象而无需创建类。该对象不属于任何类；它是同类中唯一的一个。您可以使用typeof 运算符来获取新创建的对象的数据类型。请参阅以下示例：

*要运行代码，请将鼠标悬停在“输出”面板上，然后单击“使用 JS 运行”按钮。*

jsbin.com 上的 JS Bin ">检查对象的类型

示例：对象初始值设定项

以下代码创建一个对象“student”，具有三个属性 name、sclass 和 rollno。

var Student = { 
                name : "David Rayy", 
                sclass : "VI", 
                rollno : 12 }

使用构造函数

这是创建对象的另一种方法。

首先通过编写构造函数定义对象类型，然后用new创建对象的实例。

编写构造函数时，我们应该遵循以下规则。

构造函数名称将是对象类型名称。

在构造函数中，this 运算符用于引用当前对象。

属性/方法的值在等号“=”之后定义。

构造函数中不会有“return”语句。

构造函数的示例

这是构造函数的示例：

function Student(name, sclass, rollno)
    { 
     this.name = name; 
     this.sclass = sclass; 
     this.rollno = rollno; }

上面对象的类型是student，有name、sclass、rollno三个属性。对象的值取决于传递给函数的参数。让我们创建一个名为 Studentv 的对象，如下所示：

studentv = new student("John", "V", 10);

上面的语句创建一个名为 Studentv 的对象，并为其属性分配指定的值。因此，studentv.name 的值是字符串“John”，studentv.sclass 是字符串“V”，student.rollno 是整数 10。您可以使用 new 运算符创建任意数量的学生对象。例如 -

studentv  = new student("John", "V", 10);
studentvi = new student("Scott", "VI", 2);

对象和属性

属性是对象的特征。 JavaScript 对象具有与其关联的属性。例如，文档对象有一个名为 fgColor 的属性，该属性描述 (document.fgColor = "color_name") 该对象的背景颜色。 JavaScript 对象的属性与 JavaScript 变量基本相同，只是附加了带有点符号的对象名称。

在javaScript中，对象名和属性名都是区分大小写的。您可以通过指定值来定义属性。假设有一个名为student的对象，它具有三个属性name、sclass、rollno。他们定义如下：

student.name = "David Rayy";
student.sclass = "V";
student.rollno = 1 ;

JavaScript 对象的属性也可以使用方括号表示法来设置。 JavaScript 中的对象和数组密切相关，实际上它们是同一数据结构的不同接口。您可以按如下方式设置先前学生对象的属性：

student.["name"] =  "David Rayy";
student.["sclass"] =  "V";
student.["rollno"] = 1;

所述数组的类型称为关联数组，因为每个索引元素也与一个字符串值关联。

访问属性

有两种方法可以访问对象的属性：

点符号

方括号表示法。

两种符号的作用相同。方括号表示法用于在动态设置属性时确定属性名称（即直到运行时才确定属性名称）。

var color = {name: 'red'};
color.name; // red
color['name']; // red

var get = 'name';
color[get]; // red

删除属性

删除运算符删除对象的属性。如果将属性设置为 null 或未定义，则只会删除与该属性关联的值，但不会删除键。请参见以下示例：

var obj = {
    property1 : 'value1',
    property2 : 'value2',
    property3 : 'value3'
};
obj.property1 = undefined;
obj.property2 = null;
delete obj.property3;

JavaScript：定义方法

在 JavaScript 中，对象的方法在该对象“内部”运行。方法是与对象关联的函数。对象的键称为属性，它们是原始值和其他对象的容器。如果属性包含函数作为其值，则它们称为方法。方法的定义方式与普通函数的定义方式相同，只不过它们必须被指定为对象的属性。请参阅以下代码：

句法

 var myObj = {
       ...
       methodName: Myfunction(parameters) 
       {
         statements;
       }
       };

在哪里

“ myObj ”是对象的名称。

“ methodName ”是方法的名称。

“ Myfunction ”是函数的名称。

您可以通过以下方式调用上述方法：

myObj.methodName(参数);您可以通过在对象构造函数中包含方法定义来定义对象类型的方法。例如，您可以定义一个函数，该函数将格式化并显示先前定义的学生对象的属性（即名称、班级、卷号）；请参阅以下示例：

function studentDetails() 
{
alert(
"The name of the student is " + this.name + " Class : " + this.class        + " Roll No.: " + this.rollno)
}

其中alert() - 显示学生的详细信息。

要使该函数成为学生对象的方法，可以使用以下代码：

this.studentDetails = 学生详细信息;到对象定义。

因此，学生的完整定义现在如下所示：

function student(name, class, rollno)
{ 
this.name = name 
this.class = class
this.class = rollno
this.studentDetails = studentDetails
}

示例：学生对象

HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>working-with-objects-1</title>
</head>
<body>

</body>
</html>

JS代码

var fruitslist = new Array("Orange","Apple","Banana","Chery" );
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("List of Fruits : " + fruitslist); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 

var newfruitslist =fruitslist.slice(1,3);
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Extract Fruits List : " + newfruitslist); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph);

JavaScript 方法的更多示例

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
  <title>working-with-objects-2</title>
</head>
<body>

</body>
</html>

JS代码

var myObj = { // object "myobj" with three properties: x, y, z
  x: 100, // primitive value
  y: {a: 12}, // object "y" with property a
  z: function() // function abc -> (method)
      {  
       console.log('Method myObj.z');
      }
};
console.log(myObj.x); // 100
console.log(myObj.y); // [object Object]
console.log(myObj.y.a); // 12
myObj.z(); // 'Method myObj.z'

原型

在上一节中，我们将对象讨论为简单的键和值对。但是JavaScript对象中有一个附加属性，一个指向另一个对象的指针，称为该对象的原型。

JavaScript 不支持经典的继承模型，而是使用原型模型。

JavaScript 中的每个对象都包含对其原型的引用

默认是object.prototype

字符串使用 String.prototype 等。

原型可以有原型，等等。

对象从其原型继承所有属性/方法

在下面的示例中，我们创建了一个构造函数，并将一个方法（“display”）添加到该函数的原型属性中，然后创建一个新对象（“stu1”）。

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>working-with-objects-3</title>
</head>
<body>

</body>
</html>

JS代码

// Constructor function student
function student() {
    this.name = "Robert";
}
// add a method ti function's prototype
student.prototype.display = function() {
   console.log("My name is  " + this.name);
};
// create a new object stu1 
var stu1 = new student();
// stu1 can access the display() method
stu1.display();

现在，新创建的对象“stu1”可以访问构造函数原型上定义的所有属性。