JavaScript - 对象

embedded/2024/9/25 11:18:20/

对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)

1. 控制台调用

使用单独的Javascript程序需要使用的网页端口的控制台,键入相关命令

Windows点击F12,MAC的打开方法是打开浏览器,同时键入option+command+I

使用console使用控制台

2. 创建对象

2.1 基础创建

javascript">const peron={}
//创建一个对象
javascript">const person={name:['Bob','Louis'],age:[18,20],color:'Red'
};

Javascript对象的创建有点像python字典的创建

如上述代码所示,对象中包含name,age以及color等元素

2.2 使用方法进行对象的创建

引入了类(class)的语法来创建对象,它是构造函数的一种语法糖,使得创建对象和继承变得更加直观。

javascript">class person=
{name;age;constructor(name,age){this.name = name;this.age = age;};great(){console.log('Hello');};
}

创建对象

javascript">const A = new person('name',16);

 2.3 构造函数

使用构造函数一次性创建多个对象

javascript">funtion create(name)
{const obj = {};obj.name = name;obj.introduce = function(){console.log(`my name is ${this.name}`);};    
};
javascript">let a = create('Bob');
console.log(a.name);
a.introduce();

3. 对象元素的调用

javascript">//调用对象中的元素
person.name[0];
console.log(person.color);

javascript">const person =
{name:'Bob',showname(){console.log(`我的名字是${this.name}`);};};

对象内函数创建也可以使用

javascript">const person =
{showname:function()
{
};
};

对象内元素查看的不同方式:

javascript">//JavaScript提供了多种方式,以下是最常见的几种
person.name[0];
person['name'][0];

也可以直接针对元素进行添加或改变值

4. 对象原型

在JavaScript中,所有的对象都有一个内置属性,称为它的 prototype(原型)。它本身是一个对象,故原型对象也会有它自己的原型,逐渐构成了原型链。原型链终止于拥有 null 作为其原型的对象上。

类似于继承,子类具有父类的特点,可以调用父类中的属性以及方法

4.1 设置原型

使用现有的对象作为新创建对象的原型,继承原型的方法与属性

javascript">const personPrototype = {greet() {console.log("hello!");},
};const carl = Object.create(personPrototype);
carl.greet(); // hello!

5. 继承

继承允许一个类(子类)继承另一个类(父类)的属性和方法。

使用class构造器进行继承

javascript">class a={constructor(name) = {this.name = name;
};introduce = function(){console.log('Hello!');};
};class b = extends a{bark = function()
{};
};
javascript">const dog = new b('Bob');
dog.bark();
dog.introduce();

6. 多态

当一个方法拥有相同的函数名,但是在不同的类中可以具有不同的实现时,我们称这一特性为多态。多态使用子类重写的方法进行实现

javascript">class Animal {speak() {console.log('Animal speaks');}
}class Dog extends Animal {speak() {console.log('Dog barks');}
}class Cat extends Animal {speak() {console.log('Cat meows');}
}const animals = [new Dog(), new Cat()];animals.forEach(animal => {animal.speak(); // 输出: Dog barks 和 Cat meows
});

6.1 重写

在Javascript中,无需声明其他,重写直接针对相同函数名进行代码填充即可

javascript">class Animal {speak() {console.log('Animal speaks');}
}class Dog extends Animal {speak() {console.log('Dog barks');}
}const myDog = new Dog();
myDog.speak(); // 输出: Dog barks

7. 封装

封装是面向对象编程的一个重要特性,它使得对象的内部状态对外部隐藏,提供了清晰的接口来操作对象的数据。

可以通过相应的借口获取对象的信息,并且保证原有对象不会被破坏

7.1 传统封装

通过构造函数实现

javascript">class Person {constructor(name, age) {this._name = name; // 约定为私有属性this._age = age;   // 约定为私有属性}getName() {return this._name;}setName(newName) {this._name = newName;}getAge() {return this._age;}setAge(newAge) {this._age = newAge;}
}const person = new Person('John', 30);
console.log(person._name); // 输出: John (虽然约定为私有,但仍然可以访问)

7.2 类(class)语法

使得封装变得更加直观。可以使用 # 语法来定义私有字段,外部无法直接修改访问

javascript">class Person {#name; // 私有属性#age;  // 私有属性constructor(name, age) {this.#name = name;this.#age = age;}getName() {return this.#name;}setName(newName) {this.#name = newName;}getAge() {return this.#age;}setAge(newAge) {this.#age = newAge;}
}const person = new Person('John', 30);
console.log(person.getName()); // 输出: John
person.setName('Jane');
console.log(person.getName()); // 输出: Jane


http://www.ppmy.cn/embedded/111530.html

相关文章

LeetCode: 2552. 统计上升四元组 动态规划 时间复杂度O(n*n)

2552. 统计上升四元组 today 2552. 统计上升四元组 题目描述 给你一个长度为n下标从 0 开始的整数数组 nums ,它包含1到n的所有数字,请你返回上升四元组的数目。 如果一个四元组 (i, j, k, l) 满足以下条件,我们称它是上升的:…

【北京迅为】《STM32MP157开发板使用手册》- 第二十八章Cortex-M4外部中断实验

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器,既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构,主频650M、1G内存、8G存储,核心板采用工业级板对板连接器,高可靠,牢固耐…

Linux shell编程学习笔记78:cpio命令——文件和目录归档工具(上)

0 前言 在Linux系统中,除了tar命令,我们还可以使用cpio命令来进行文件和目录的归档。 1 cpio命令的功能,帮助信息,格式,选项和参数说明 1.1 cpio命令的功能 cpio 名字来自 "copy in, copy out"&#xf…

鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 轻内核M核源码分析系列一 数据结构-双向循环链表 轻内核M核源码分析系列二 数据结构-任务就绪队列 鸿蒙轻内核M核源码分析系列三 数据结构-任务排序链表 轻…

GraphRAG源码解读:基于知识图谱构建的检索增强生成系统

1. 引言 GraphRAG,微软开源的一个新的基于知识图谱构建的检索增强生成(RAG)系统,该框架旨在利用大型语言模型(LLMs)从非结构化文本中提取结构化数据, 构建具有标签的知识图谱,以支持数据集问题…

实战 Transformers 模型微调之数据集处理库 Hugging Face Datasets

在深度学习中,数据处理是模型训练的关键环节之一。Hugging Face Datasets 库提供了一套强大的工具来简化这一过程,使数据集的管理和预处理变得高效且直观。本文将详细介绍 Hugging Face Datasets 库的基本用法和数据预处理策略,并结合实际代码…

远程控制如何赋能制造业?可视化产线设备运维降本增效

随着如今制造业智能化程度的不断提升,传统制造业对于远程控制方案的需求也越来越紧迫。 在引入远程控制技术之前,无论是日常办公还是产线设备运维,都存在一定的运维资源浪费,效率低下等问题。 那么作为专业的远程控制解决方案品牌…

JS获取页面中video标签视频的封面和时长

从HTML中提取Video信息 /*** 从html字符串中提取video标签* 入参: {String} htmlString* 出参:{Array} 数组*/ function extractVideosFromHTML(htmlString) {const dom new DOMParser().parseFromString(htmlString, text/html);const videos Arr…