javascript对象介绍

1. 什么是对象?

在 JavaScript 中,对象是一个无序的键值对集合,可以用来存储数据和功能。对象可以包含原始值、函数(方法)以及其他对象,是构建复杂数据结构和实现面向对象编程的基础。

2. 创建对象

2.1 字面量方式

最常见的创建对象的方法是使用对象字面量:

const person = {name: "Alice",age: 25,isStudent: true
};

2.2 构造函数方式

使用构造函数可以创建多个相似对象:

function Person(name, age) {this.name = name;this.age = age;
}const person1 = new Person("Bob", 30);
const person2 = new Person("Charlie", 22);

2.3 Object.create() 方法

通过指定原型对象创建新对象:

const proto = {greet: function() {console.log(`Hello, my name is ${this.name}`);}
};const person3 = Object.create(proto);
person3.name = "David";
person3.greet(); // 输出: Hello, my name is David

3. 访问对象属性

3.1 点语法

使用点号 (.) 来访问属性:

console.log(person.name); // 输出: Alice

3.2 方括号语法

使用方括号 ([]) 访问属性,适用于动态属性名:

console.log(person['age']); // 输出: 25

4. 修改对象属性

你可以直接修改对象的属性值:

person.age = 26; // 修改属性
console.log(person.age); // 输出: 26person.isStudent = false; // 添加新属性
console.log(person.isStudent); // 输出: false

5. 删除对象属性

使用 delete 操作符删除属性:

delete person.isStudent; // 删除属性
console.log(person.isStudent); // 输出: undefined

6. 遍历对象属性

6.1 for…in 循环

可以使用 for…in 遍历对象的所有可枚举属性:

for (let key in person) {console.log(`${key}: ${person[key]}`);
}

6.2 Object.keys()

获取对象的所有属性名:

const keys = Object.keys(person);
console.log(keys); // 输出: ["name", "age"]

6.3 Object.values()

获取对象的所有属性值:

const values = Object.values(person);
console.log(values); // 输出: ["Alice", 26]

6.4 Object.entries()

获取对象的所有键值对:

const entries = Object.entries(person);
console.log(entries); // 输出: [["name", "Alice"], ["age", 26]]

7. 对象方法

对象可以包含方法,这是将数据和功能结合的一个重要特点:

const calculator = {add: function(x, y) {return x + y;},subtract: function(x, y) {return x - y;}
};console.log(calculator.add(5, 3)); // 输出: 8
console.log(calculator.subtract(5, 3)); // 输出: 2

8. 继承与原型链

JavaScript 中的继承通常通过原型链实现:

8.1 创建原型

首先定义一个动物类,然后定义狗类继承自动物类:

function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(`${this.name} makes a noise.`);
};function Dog(name) {Animal.call(this, name); // 继承属性
}// 继承方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;const dog = new Dog("Rex");
dog.speak(); // 输出: Rex makes a noise.

8.2 使用 class 语法

ES6 引入了 class 语法,使得继承的定义更加简洁:

class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}const dog2 = new Dog("Max");
dog2.speak(); // 输出: Max barks.

8.3 原型链

1. 什么是原型链?

在 JavaScript 中,每个对象都有一个内部属性 [[Prototype]],指向另一个对象(即它的原型)。通过这个原型,对象可以访问其原型对象上的属性和方法。当试图访问一个对象的属性时,JavaScript
首先会查找该对象本身是否有该属性。如果没有,它会查找对象的原型,直到找到该属性或到达原型链的末尾(通常是 null)。

2. 原型链的基本概念
构造函数:通过构造函数创建对象时,所有实例对象都共享构造函数的原型。
prototype 属性:每个函数都有一个 prototype 属性,它指向一个对象,该对象包含所有实例共享的属性和方法。
proto 属性:这是每个对象的一个隐式属性,指向它的原型。
3. 原型链的工作原理
当你访问一个对象的属性时,JavaScript 引擎会按照以下步骤执行:
检查对象本身是否有该属性。
如果没有,检查对象的原型。
如果仍然没有,查找原型的原型(即上一级原型)。
持续查找,直到找到属性或到达原型链的终点(即 null)。
4. 创建原型链的示例
以下示例展示了如何通过原型链来实现继承:

// 定义一个构造函数
function Animal(name) {this.name = name;
}// 在原型上定义方法
Animal.prototype.speak = function() {console.log(`${this.name} makes a noise.`);
};// 定义一个 Dog 构造函数
function Dog(name) {Animal.call(this, name); // 继承属性
}// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;// 重写 Dog 的 speak 方法
Dog.prototype.speak = function() {console.log(`${this.name} barks.`);
};// 创建实例
const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

5. 检查原型链
你可以使用 instanceof 和 isPrototypeOf 来检查对象与原型之间的关系:

console.log(dog instanceof Dog); // 输出: true
console.log(dog instanceof Animal); // 输出: true
console.log(Animal.prototype.isPrototypeOf(dog)); // 输出: true

6. 原型链的优点
代码复用:通过原型链,可以创建共享的方法和属性,减少内存占用。
动态扩展:可以在运行时给原型添加新方法和属性,所有实例都会自动更新。
7. 注意事项
原型链的深度过大可能会导致性能问题,因此要尽量保持原型链的扁平化。
使用 Object.create() 进行原型链的设置可以避免一些常见的陷阱,如共享引用类型的属性(例如数组和对象)。

9. 对象的特殊属性

9.1 this 关键字

在对象方法中,this 关键字指向调用该方法的对象:

const person4 = {name: "Eve",greet: function() {console.log(`Hello, my name is ${this.name}`);}
};person4.greet(); // 输出: Hello, my name is Eve

9.2 闭包与对象

对象中的方法可以形成闭包,保持对外部变量的引用:

function createCounter() {let count = 0;return {increment: function() {count++;console.log(count);},decrement: function() {count--;console.log(count);}};
}const counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

10. 小结

JavaScript 对象是非常强大和灵活的数据结构,可以存储各种类型的数据和方法。掌握对象的创建、访问、修改和遍历等基本操作,对于高效使用 JavaScript 至关重要。在现代开发中,对象广泛用于数据模型、API 响应处理以及复杂应用程序的状态管理等场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56206.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容

介绍 在当今数据驱动的世界中,抓取动态网页内容变得越来越重要,尤其是像抖音这样的社交平台,动态加载的评论等内容需要通过特定的方式来获取。传统的静态爬虫方法难以处理这些由JavaScript生成的动态内容,Selenium爬虫技术则是一…

字典如何与选择器一起使用

背景:开发过程中会遇到某些字段需要做成下拉框。如下图: 组件 | Element里有select选择器这个组件可以实现下拉框的效果 我们可能会想到创一个辅助表来存储这些下拉数据像这样 这样虽然能实现,但是在实际开发中是不合理的,如果有…

个税自然人扣缴客户端数据的备份与恢复(在那个文件夹)

一,软件能够正常打开,软件中的备份与恢复功能 1,备份 您按照下面的方法备份一下哦~ 进入要备份的自然人软件,点击左侧系统设置→→系统管理→→备份恢复; 在备份设置里,点击“备份到选择路径”,…

WebGL编程指南 - 颜色与纹理续

设置纹理坐标(initVertexBuffers()) 从缓冲区到 attribute 变量的流程: // 顶点坐标 function initVertexBuffers(gl) {// 数据准备let verticesTexCoords new Float32Array([// 顶点坐标,纹理坐标-0.5, 0.5, 0.0, 1.0, -0.5, …

图像异常检测评估指标-分类性能

图像异常检测评估指标-分类性能 1. 混淆矩阵 混淆矩阵包括4个用于衡量分类算法性能的基本数值 四个字母代表的含义是:P(Positive)代表算法将样本预测为正类,N(Negative)代表算法将样本预测为负类&#xf…

<a-table>行数据增加点击事件并获取点击行的数据+自定义button按事件

先看代码&#xff1a; 在 Ant - Design - Vue 的<a - table>组件中&#xff0c;通过customRow属性可以为表格的每一行添加自定义的行为和样式。当设置customRow为一个返回包含onClick函数的对象的函数时&#xff0c;实际上是在为每一行添加一个点击事件监听器。 在a-tabl…

Java学习Day50:唤醒八戒(Excel相关)

1.批量导入Excel数据 1.实现模板下载 <el-card class"box-card"> <div class"boxMain"> <el-button style"margin-bottom: 20px;margin-right: 20px" type"primary" click"downloadTemplate()">模板下载…

ST7789读取ID错误新思路(以STC32G为例)

1.前言 前两天刚把ST7789写入搞定&#xff0c;这两天想折腾一下读取。最开始是读ID&#xff0c;先是用厂家送的程序&#xff0c;程序里面用的是模拟I8080协议&#xff0c;一切正常。后来我用STC32G的内置LCM模块&#xff0c;发现读取不出来。更神奇的是ID读不出来&#xff0c;…

达梦数据库DEXP/DIMP逻辑备份还原

1、概念 逻辑备份还原是对数据库逻辑组件&#xff08;如表、视图和存储过程等数据库对象&#xff09;的备份还原。逻辑导出&#xff08;dexp&#xff09;和逻辑导入&#xff08;dimp&#xff09;是 DM 数据库的两个命令行工具&#xff0c;分别用来实现对 DM 数据库的逻辑备份和…

[项目详解][boost搜索引擎#2] 建立index | 安装分词工具cppjieba | 实现倒排索引

目录 编写建立索引的模块 Index 1. 设计节点 2.基本结构 3.(难点) 构建索引 1. 构建正排索引&#xff08;BuildForwardIndex&#xff09; 2.❗构建倒排索引 3.1 cppjieba分词工具的安装和使用 3.2 引入cppjieba到项目中 倒排索引代码 本篇文章&#xff0c;我们将继续项…

【C++指南】类和对象(四):类的默认成员函数——全面剖析 : 拷贝构造函数

引言 拷贝构造函数是C中一个重要的特性&#xff0c;它允许一个对象通过另一个已创建好的同类型对象来初始化。 了解拷贝构造函数的概念、作用、特点、规则、默认行为以及如何自定义实现&#xff0c;对于编写健壮和高效的C程序至关重要。 C类和对象系列文章&#xff0c;可点击下…

GitLab+Jenkins 实现 Webhook 自动化触发构建

在持续集成和持续部署&#xff08;CI/CD&#xff09;过程中&#xff0c;如何实现代码提交后自动触发构建&#xff1f;今天&#xff0c;我们将通过GitLab与Jenkins的集成&#xff0c;利用Webhook实现自动化触发构建&#xff0c;为你的开发流程注入高效能量&#xff01; 在每次代…

Java 多线程(六)—— 线程池 和 工厂模式

线程池 随着现代计算机的发展&#xff0c;任务越来越多&#xff0c;线程创建也逐渐增加&#xff0c;每次让操作系统创建线程这个开销就有点大&#xff0c;因此&#xff0c;我们诞生了线程池的概念&#xff0c;线程池里面有很多线程&#xff0c;这些线程可以被用户去调用执行任…

Java最全面试题->Java基础面试题->JavaSE面试题->异常面试题

文章目录 异常1.说一下Java中的异常体系&#xff1f;2.Error和Exception的区别3.写出你最常见的 5 个 RuntimeException&#xff1f;4.如何处理异常?5.try()里面有⼀个return语句&#xff0c; 那么后面的finally{}里面的代码会不会被执行&#xff1f;什么时候执行&#xff0c;…

C++ 进阶:类相关特性的深入探讨

⭐在对C 中类的6个默认成员函数有了初步了解之后&#xff0c;现在我们进行对类相关特性的深入探讨&#xff01; &#x1f525;&#x1f525;&#x1f525;【C】类的默认成员函数&#xff1a;深入剖析与应用&#xff08;上&#xff09; 【C】类的默认成员函数&#xff1a;深入剖…

初阶数据结构【3】--单链表(比顺序表还好的一种数据结构!!!)

本章概述 前情回顾单链表实现单链表彩蛋时刻&#xff01;&#xff01;&#xff01; 前情回顾 咱们在上一章博客点击&#xff1a;《顺序表》的末尾&#xff0c;提出了一个问题&#xff0c;讲出了顺序表的缺点——有点浪费空间。所以&#xff0c;为了解决这个问题&#xff0c;我…

Java框架之MyBatis Plus

一、MyBatis Plus框架概述 MyBatis Plus&#xff08;简称MP&#xff09;是一个基于MyBatis的增强工具&#xff0c;旨在简化开发、提高效率。它在MyBatis的基础上扩展了一些实用的功能&#xff0c;使数据库操作更加便捷。MyBatis Plus支持所有MyBatis原生的特性&#xff0c;所以…

TypeScript 出现过的问题

不能将类型“unknown”分配给类型“string”。 不能直接将类型“unknown”分配给类型“string” /**** 【1 - 问题】会画红波浪线 ****/ window.document.title to?.meta?.title || /**** 【2 - 解决】解决红波浪线 ****/ const title: unknown to?.meta?.title || if …

QML 基本动画

在介绍完 QML 动画框架之后,现在我们来看看具体的动画及其用法。先从最常用的基本动画入手,这些动画包括:PropertyAnimation、ColorAnimation、Vector3dAnimation 和 PathAnimation 等,它们不仅能够帮助我们轻松地为应用程序添加动态效果,还能显著提升用户体验,使得界面更…

vue3 解决背景图与窗口留有间隙的问题

需要实现一个登录界面&#xff0c;login.vue的代码如下&#xff1a; <script> import { ref } from vue;export default {setup() {return {};}, }; </script><template><div id"login-container" class"login-container"><di…