JavaScript对象详细剖析

JSON 2024-04-29 16:38:19 133

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

简介

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

JavaScript 对象、创建对象、语法

JavaScript 对象

JavaScript 中的“一切”就像一个对象,例如字符串、数字、数组、函数……,但有两个例外:nullundefined

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

删除对象

使用删除运算符我们可以删除一个对象。请参阅以下代码如何删除对象。

myobj=新数组(元素1,元素2)

删除 myobj

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/528.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
Python正则表达式详细剖析
Python正则表达式详细剖析
JavaScript中splice()方法,有Demo详细介绍
如何解JSON数据(详细解答)
对Java的常用对象(POJO、DTO、PO、BO、VO、DAO)详细解释及应用场景
TCP 和 UDP协议详细讲解,优缺点分讲解
Linux 安装 Redis 详细步骤讲解
BlockingQueue 方法详细描述
MySQL备份方案之Xtrabackup详细解答
Maven的Mirror和Repository 的详细讲解
最新文章
Linux I/O重定向 279
Ruby 循环 - while、for、until、break、redo 和 retry 289
Node.js:全局对象 243
如何使用终端检查Linux上的内存使用情况 239
JavaScript对象详细剖析 133
Python print() 函数 220
PHP if/else/elseif 语句 193
HTML5 Canvas弧线教程 184
Java赋值运算符 239
XML内部实体和外部实体 293
最热文章
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 684484
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 674918
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 605771
免费天气API,天气JSON API,不限次数获取十五天的天气预报 594344
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 554304
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 509743
Elasticsearch教程(四) elasticsearch head 插件安装和使用 480465
Jackson 美化输出JSON,优雅的输出JSON数据,格式化输出JSON数据... ... 266589
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 244463
Elasticsearch教程(一),全程直播(小白级别) 226111
支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...