文档目录

文档目录

我的书签

请登录

JavaScript

JavaScript 入门教程

JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。

W3CAPI

1

2020-06-18 07:05:48

JS 操作对象

JavaScript 对象

简介

JavaScript并非如Java等成熟的面相对象编程语言，而是基于简单的对象模型构建。对象是由属性构成的构造体，这些属性包含JavaScript变量或其他对象。对象还拥有与其相关联的函数，称为方法。除JavaScript核心对象（如数组或数学对象）外，开发人员可自定义对象。
由于 JavaScript 是一种弱类型、动态且富有表现力的语言，您可以通过多种方式实现相同的任务。本教程旨在引导您充分发挥该语言的潜力(在创建和使用对象的语境中)，进而帮助理解其背后的运行机制。需要声明的是，本文所述方法并非唯一实现途径。相反，若本文能帮助您选择适合自己的方法，那将非常有意义。

目录索引:

JavaScript对象，创建对象，语法
使用构造函数
构造函数示例
对象与属性
访问属性
删除属性
原型
删除对象

JavaScript 对象

JavaScript中诸如字符串、数字、数组、函数等"所有事物"都具有类似对象的行为特征，但存在两个例外情况。nullandundefined.

JavaScript：对象创建

在JavaScript中，存在多种创建对象的方式。您可以通过对象初始化器创建对象，或编写构造函数来定义对象类型，并使用new运算符创建该类型的实例。JavaScript的“对象初始化器”术语与C++中使用的表述保持一致。

语法说明

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

var objectName = {}

或者

您可通过定义属性及对应值创建新对象：

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

where

objectName :新对象的名称

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

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

在JavaScript中，你可以直接创建对象而无需定义类。该对象不属于任何类，它是独立存在的唯一实例。你可以通过 typeof 运算符用于获取新创建对象的数据类型。参见以下示例：

*将鼠标悬停在输出面板上，点击“Run with JS”按钮即可运行代码。*

JS Bin（jsbin.com）检测对象类型

示例：对象初始化器

以下代码创建了一个名为"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对象都有与其相关联的属性。例如，document对象具有名为fgColor的属性，该属性描述了该对象的前景色（通过document.fgColor = "颜色名称"设置）。JavaScript对象的属性本质上类似于JavaScript变量，区别在于需要通过点号表示法附加对象名称进行访问。

在JavaScript中，对象名称与属性名称均区分大小写。可通过为属性赋值的方式进行定义。假设存在一个名为student的对象，其包含name、sclass和rollno三个属性，其定义如下：

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

JavaScript 对象的属性也可通过方括号表示法进行设置。JavaScript 中的对象和数组密切相关，本质上是同一数据结构的两种不同接口。您可通过以下方式设置前文 student 对象的属性：

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或undefined仅会移除该属性对应的值，但不会删除键名。请观察以下示例：

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

JavaScript：定义方法

在 JavaScript 中，对象的方法运行在该对象"内部"。方法是与对象关联的函数。对象的键称为属性(properties)，它们是原始值(primitive values)和其他对象的容器。当属性以函数作为值时，这些属性被称为方法(methods)。方法的定义方式与普通函数相同，但它们必须作为对象的属性进行赋值。参考以下代码：

语法说明


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

Where

"myObj”是某对象的名称。
"methodName"是方法的名称。
"Myfunction"是函数的名称。

可按如下方式调用上述方法：

myObj.methodName(parameters);

您可以通过在对象构造函数中包含方法定义来为其对象类型定义方法。例如，可以为先前定义的student对象定义一个格式化并显示其属性(即name、class、rollno)的方法，参见以下示例：

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

alert()——显示学生详情。

要将此函数作为student对象的方法，可使用以下代码：

将 this.studentDetails = studentDetails; 添加到对象定义中。

因此，student 的完整定义现应如下所示：

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"现在可以访问构造函数原型上定义的所有属性。

删除对象

使用删除操作符我们可以移除对象。请参考以下代码示例了解如何移除对象的实现方式。

myobj= new Array(element1, element2)

delete myobj

上一篇：JavaScript：decodeURIComponent 函数
下一篇：JavaScript：核心对象

作者文档

相关提问

敬请期待