JavaScript 对象

简介: JavaScript 对象

JavaScript 对象

JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个名和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外,你也可以定义你自己的对象。本章节讲述了怎么使用对象、属性、函数和方法,怎样实现自定义对象。

对象概述

javascript 中的对象 (物体),和其它编程语言中的对象一样,可以比照现实生活中的对象 (物体) 来理解它。javascript 中对象 (物体) 的概念可以比照着现实生活中实实在在的物体来理解。

在 javascript 中,一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象 (物体),拥有属性。杯子有颜色,图案,重量,由什么材质构成等等。同样,javascript 对象也有属性来定义它的特征。

对象和属性

一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征。你可以通过点符号来访问一个对象的属性。

objectName.propertyName

可以说 "JavaScript 对象是变量的容器"。

但是,我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。
对象键值对的写法类似于:

  • PHP 中的关联数组
  • Python 中的字典
  • C 语言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

真实生活中的对象,属性和方法

真实生活中,一辆汽车是一个对象。

对象有它的属性,如重量和颜色等,方法有启动停止等:
在这里插入图片描述

和其他 javascript 变量一样,对象的名字 (可以是普通的变量) 和属性的名字都是大小写敏感的。你可以在定义一个属性的时候就给它赋值。例如,我们创建一个 myCar 的对象然后给他三个属性,make,model,year。具体如下所示:

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

对象中未赋值的属性的值为undefined(而不是null)。

myCar.noProperty; // undefined

JavaScript 对象的属性也可以通过方括号访问或者设置(更多信息查看 property accessors). 对象有时也被叫作关联数组,因为每个属性都有一个用于访问它的字符串值。例如,你可以按如下方式访问 myCar 对象的属性:

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

创建对象的三种方式

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

利用对象字面量创建对象 {}

//varobj = {}   //创建了一个空的对象
    var obj = {
        name:'张三',
        age:20,
        sex:'男',
        func: function(){
            console.log('hei~');
        }
    }

利用new Object创建对象

var obj = new Object(); //创建一个空的对象
        obj.name = '张三';
        obj.age = 19;
        obj.sex = '男';
    obj.func = function(){
        console.log('hei~');
    }
    console.log(obj.name);
    console.log(obj['sex']);
    obj.func();

利用构造函数创建对象

(1)我们为什么需要使用构造函数?

------就是因为前面两种创建对象的方式一次只能创建一个对象。

因为我们一次创建一个对象,里面很多的属性和方法是大量相同的,我们只能复制。
因此我们可以利用函数的方法,重复这些相同的代码,我们就把这个函数称为构造函数。
又因为这个函数不一样,里面 封装的不是普通代码,而是 对象
构造函数: 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

相关文章
|
30天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
1月前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
1月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
2天前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
25天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
26 1
JavaScript基础知识-枚举对象中的属性
|
16天前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
29 8
|
26天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
29 2
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
17 1
js之DOM 文档对象模型
|
25天前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
26 0
JavaScript基础知识-对象字面量
|
26天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
14 1