前端开发:JavaScript(6)—— 对象

对象是面向对象编程中最核心的思想。如果你有过面向对象编程语言(C++、JAVA等)的基础,那么JS中的对象就能够快速理解并上手。当然,可能你并没有相关的一些知识储备,下面我们先来简单讲解一下对象。本文所做出的介绍仅仅是简化版的讲解,目的是让我们能够快速上手进行代码编写;如果想要彻底了解对象这一部分的内容,本文的介绍是远远不够的,还需要我们另外去钻研。

什么是对象?

对象可以看做一个复合型变量。我们普通定义一个变量时只能存储一个数据,而对象可以存储多个数据作为属性存储。比如下面的代码:

javascript 复制代码
let person = {
    name: "Alice",
    age: 16,
    isStudent: true
};

这里我们先理解什么是对象,关于对象的书写形式我们会在后面进行讲解。

从上面的代码中我们卡创建了一个名为 person 的对象。它包括啦三个属性:name、age、和isStudent。这三个属性分别存储不同的数据,这些数据就是对象所存储的数据。对象的数据可以自由增删查改。

对象将多个属性封装在一起,方便我们使用。其实和现在手机上存储的联系人信息一样,我们添加一个联系人方式可以填多个信息:姓名、电话、住址、邮箱、生日、头像等等。这些信息被封装在一起,成为这个联系人的属性,而这个联系人也就是我们现在所说的对象。

我们创建出了对象用来存储信息,当然也能将信息进行使用。在编程中。对象的属性值可以是任何类型,甚至是另一个对象或函数;并且对象具有很高的灵活性,可以根据需求进行增删查改,能够组织信息、减少重复,能够进行代码复用,是十分重要的一个思想。这便是对象的意义。

对象的创建

与JAVA不同,在JS6之前JavaScript中没有类的概念。所以我们创建对象时直接创建。

1、使用字面量进行对象的创建

我们上面代码的创建方式就是通过字面量进行创建的。其规范为定义一个变量,通过在大括号内添加属性,再将大括号赋值给变量的形式创建一个对象。属性之间用逗号连接,大括号后要记得加上分号。

javascript 复制代码
let student = {name:Amily,age:18};

那么我们如何使用对象中的属性呢?我们现在打印这两个属性,看下面两行代码:

javascript 复制代码
console.log(student.name);
console.log(student['age']);

这便是两种访问对象中属性的方法。

2、使用 new Object 创建

我们也可以通过关键字 new Object 来创建一个对象。

javascript 复制代码
let Student = new Object();

这样我们就创建了一个对象。如果我们想要添加属性,直接在下面写上需要添加:

javascript 复制代码
Student.name = David;
Student.age = 22;
Student['height'] = "180cm";
Student.SayHello = function(){console.log("Hello!")};

3、使用构造函数创建对象

上面的两种方法一次只能创建一个对象。那么遇到需要多对象的时候就怕用到我们的第三个方法:使用构造函数创建对象。

构造函数本身是一个函数,所以我们先创建一个函数:

javascript 复制代码
function People() {};

在参数部分写上我们想要添加的属性(不包括函数),并在后面使用this来进行对应:

javascript 复制代码
function People(name,height,weight){
    this.name = name
    this.height = height
    this.weight = weight
    this.Say = function(){
        console.log("Hello");
    }
}

这便是我们创建的构造函数。那么怎样使用它呢?很简单,我们只需要按照下面的写法:

javascript 复制代码
et Alex = new People("Alex",175,"65kg");
let Rose = new People("Rose",165,"50kg");

这样我们就快速创建了两个对象。

在JS6之后引入了类的概念,不过我们这里就不做介绍了,利用上面的三种方法足够进行对对象的创建与使用。

相关推荐
苦瓜小生14 分钟前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript
报错小能手15 分钟前
深入理解 Linux 虚拟内存管理
开发语言·操作系统
和沐阳学逆向37 分钟前
我现在怎么用 CC Switch 管中转站,顺手拿 Codex 举个例子
开发语言·javascript·ecmascript
小仙女的小稀罕38 分钟前
听不清重要会议录音急疯?这款常见AI工具听脑AI精准转译
开发语言·人工智能·python
书到用时方恨少!1 小时前
Python random 模块使用指南:从入门到精通
开发语言·python
客卿1231 小时前
牛客刷题--找数字-- 字符串检测-字符串 双指针
java·开发语言
Amour恋空2 小时前
Java多线程
java·开发语言·python
小陈工2 小时前
2026年3月28日技术资讯洞察:5G-A边缘计算落地、低延迟AI推理革命与工业智造新范式
开发语言·人工智能·后端·python·5g·安全·边缘计算
第二只羽毛2 小时前
C++ 高并发内存池1
大数据·开发语言·c++·开源
不想看见4042 小时前
C++/Qt 实习岗位深度解析【结合一次研发实习谈感受】
开发语言·c++·qt