js中的类

news2024/11/24 14:49:24

1、构造函数与类

class Person{
    // 构造函数
    // 构造函数在调用类,实例化对象时调用
    constructor(name,age){
        console.log('构造器被调用了!');
        console.log(name,age);
        // 在构造函数中,this表示当前所创建的对象
        // this.name对象的属性,name是传进来的参数
        this.name =name;
        this.age=age;
    }
}
const p1=new Person('lxl',23);
const p2=new Person('孙悟空',2000000003);
console.log(p1);
console.log(p2);

在这里插入图片描述

2、封装

  • 对象就是一个用来储存不同属相的容器

  • 对象不仅存储属性,还要负责数据的安全

  • 直接添加到对象中的属性,并不安全,因为它们可以被任意的修改?

  • 如何确保数据的安全:
    1.私有化数据:将需要保护的数据设置为私有,只能在类内部使用
    2.用setter和getter暴露数据

  • 封装主要来保证数据的安全

  • 实现封装的方法
    1.属性私有化,加 #
    2.通过set和get方法来操作数据
    get 属性名(){
    return this.#属性
    }
    set 属性名(参数){
    this.#属性=参数
    }

    调用:
    p1.属性名=‘lll’
    console.log(p1.属性名)

class Person {
    // 加 # 变成私有属性,只能在类的内部访问,例如sayHi方法里面的
    #address = '花果山';
    // 私有化的数据必须先声明
    #name;
    #age;
    #gender;
    constructor(name, age, gender) {
        this.#name = name;
        this.#age = age;
        this.#gender = gender;
    };
    sayHi() {
        return '你好!我是' + this.#name + ',地址:' + this.#address;
    }

    // 设置setter和getter暴露数据
    setName(name) {
        this.#name = name;
    }
    getName() {
        return this.#name;
    }
    set age(age) {
        this.#age = age;
    }
    get age() {
        return this.#age;
    }
}
const p1 = new Person('lxl', 23, '男');
console.log(p1);
console.log(p1.sayHi());
// console.log(p1.#address);

在这里插入图片描述

// 通过set和get方法修改和展示数据
p1.setName('lll');
console.log(p1.getName());//lll
// 类似是把age变成了一个属性
p1.age = 100
console.log(p1.age);//100	

3、多态

在JS中不会检查参数的类型,所以这就意味着任何数据都可以作为参数传递
要调用某个函数,无需指定的类型,只要对象满足某些条件即可。

class Dog{
    constructor(name){
        this.name = name;
    }
}
class Person{
    constructor(name){
        this.name = name;
    }
}
const p1=new Person('lxl');
const d1=new Dog('旺财');

function sayHi(obj) {
    if (obj instanceof Person) {
        console.log('你好,我是'+obj.name);
    }else{
        console.log('请输入Person类');
    }   
}
sayHi(d1);
sayHi(p1);
sayHi(00);

在这里插入图片描述

4、继承

父类

class Animal{
    constructor(name){
        this.name = name;
    }
    say(){
        return '动物在叫!'
    }
}

子类

class Cat extends Animal{
    // 对父类的属性不满意,可以重写属性
    constructor(name,age){
        // 重写构造函数时,构造函数的第一行代码必须是super()
        super(name);//会自动调父类的构造器
        this.age = age;
    }
    // 如果对父类的say方法不满意,可以重写父类方法
    say(){
        // 调用一下父类的方法
        console.log(super.say());//在方法中可以使用super来引用父类的方法。
        return '🐱:喵喵!'
    }
}

测试用例

const c1=new Cat('小喵',90);
console.log(c1);
console.log(c1.say());

在这里插入图片描述

5、对象的结构

对象中存储属性的区域实际有两个:
1、对象自身

  • 直接通过对象所添加的属性,位于对象自身中
  • 在类中通过 x = y 的形式添加的属性,位于对象自身中

2、神秘位置:原型对象

  • 对象里还有一些其他内容,会存储到其他对象里(原型对象)
  • 在对象中会有一个属性用来存储原型对象,这个属性叫做__proto__。
  • 当我们访问对象中的属性时,会优先访问对象自身的属性,
    对象自身不包含该属性时,才会去原型对象中寻找
  • 会添加到原型对象中的情况:
    1. 在类中通过xxx(){}方式添加的方法,位于原型中
class Person {
    // 自身位置 a=b
    name = 'lxl';
    age = 23;
    constructor() {
        this.gender = 'male';
    }
    eat = function () {
        console.log('我在吃饭!');
    }
    // 神秘位置:
    sayHi() {
        console.log('你好,我是:' + this.name);
    }
}

测试用例:

const p = new Person();
p.address = '花果山'
console.log(p);
console.log(p.__proto__);
console.log(Person.prototype === p.__proto__);//true

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

简单说明芯片的启动过程和程序执行过程

目录 1.芯片启动过程 2.启动代码 2.1 堆栈定义 2.2 向量表 2.3 复位程序 2.4 中断服务程序 3. 程序执行的过程 4.数据的存取 1.芯片启动过程 芯片启动是上电后先运行芯片内部的固有程序(也就是启动代码)。启动代码程序建立完运行环境之后&#x…

微波基础介绍

1、什么是微波 大家在高中物理中都学过电磁波,可见光、微波都是电磁波波段,如下图所示,可见光谱只占有宽广的电磁波谱的一小部分: 而我们这次的主角微波,是频率范围300MHz到3THz的电磁波(1THz1000GHz&…

Clion结合CubeMX以Makefile编译和构建STM32以及OPENOCD调试嵌入式的优雅开发

目录 说在前面 Clion结合CubeMX以Makefile编译和构建STM32 新建目录和文件 串口打印问题解决,重定向fptuc失效. 说在前面 有稚晖君的一文,结果可能就让你对嵌入式开发更加易于上手。这是工具上的革新带给你的,这也是一个好的IDE带给开发人员不一样的优雅体验。…

〖Python网络爬虫实战㉗〗- Selenium案例实战(一)

订阅:新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列(零基础小白搬砖逆袭) 说明:本专栏持续更新中,目前专栏免费订阅,在转为付费专栏前订阅本专栏的,可以免费订阅付…

C++ 从代码到可以执行的过程(预编译、编译、汇编、链接)(以Linux为参考)

参考阿秀的学习笔记 测试代码 #include<iostream> using namespace std; #define PI 3.14 int main(){//测试代码cout<<PI<<endl;cout<<"hello world"<<endl;return 0; }预处理 处理内容 删除define&#xff0c;展开所有宏定义处理…

羡慕大劳星空顶?不如跟我一起使用 Jetpack compose 绘制一个星空背景(带流星动画)

前言 背景 作为一个自诩的电影爱好者&#xff0c;经常会在半夜看电影&#xff0c;看完后就会顺道去豆瓣标记一下看过&#xff0c;再看看别人对这个电影的理解。 某日深夜&#xff0c;看完电影后&#xff0c;顺手打开了豆瓣的 书影音记录 这个功能&#xff0c;起初并没有注意…

c++虚函数详解(多态特性)

1.c多态的概念 多态是c的特征之一 多态的分类&#xff1a;静态多态&#xff08;静态联编&#xff09;、动态多态&#xff08;动态联编&#xff09; 静态多态&#xff08;静态联编&#xff09;&#xff1a;函数入口地址 是在 编译阶段 确定&#xff08;运算符重载、函数重载&…

微信小程序自定义tabBar

1.app.json中tabBar里设置 "custom":true 设置好后就可使用自定义tabBar。 注意&#xff1a;list中的页面必须保存&#xff0c;且必须和自定义的tabBar页面数据一致 "tabBar": {"custom": true,"list": [{"pagePath": &q…

基于springboot篮球论坛系统

开发技术介绍 B/S架构 随着软件系统的不断改进和升级&#xff0c;B/S结构产品更为方便的特征体现地十分明显。对于一个中等偏大的公司来说&#xff0c;如果系统管理员每天要在很多台电脑之间来回查看&#xff0c;不断奔走&#xff0c;那么效率和工作量就会变得很低&#xff0…

【Redis】Redis实现点赞、点赞排行榜

目录 一、点赞 1、思路 2、代码实现 二、点赞排行榜 1、思路 2、代码实现 一、点赞 1、思路 在我们的项目中我们有时候会碰到这样的需求&#xff0c;比如实现一个博客系统&#xff0c;当用户访问到这篇博客时可以进行点赞&#xff0c;那么这个功能如何去实现呢&#xff…

Midjourney|文心一格 Prompt:完整参数列表、风格汇总、文生图词典合集

Midjourney|文心一格 Prompt&#xff1a;完整参数列表、风格汇总、文生图词典合集 1.Midjourney 完整参数列表 参数名称 调用方法使用案例注意事项V5V4V3niji版本在关键词后加空格&#xff0c;然后带上版本参数&#xff1a; --v 或者 —v –version 或者 —versionvibrant cali…

【密码学复习】第八讲 数字签名

数字签名&#xff08;Digital Signature&#xff09;&#xff0c;也称电子签名&#xff0c;是指附加在某一电子文档中的一组特定的符号或代码&#xff0c;它是利用数学方法对该电子文档进行关键信息提取并与用户私有信息进行混合运算而形成的&#xff0c;用于标识签发者的身份以…

SpringBoot学习之集成Swagger3(二十七)

一、Maven配置 注意swagger的版本号是3.0.0版本以上才可以,这里我们就选择3.0.0版本 完整的Maven配置如下(仅供参考): <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaL…

vulnhub渗透测试靶场练习1

靶场介绍 靶场名&#xff1a;Medium_socialnetwork 下载地址&#xff1a;https://www.vulnhub.com/entry/boredhackerblog-social-network,454/ 环境搭建 靶机建议选择VM VirtualBox,我一开始尝试使用VMware时会报错&#xff0c;所以改用VM VirtualBox&#xff0c;攻击机使用…

魔改车钥匙实现远程控车:(前传)在macOS上安装使用Arduino

前言 因为最近有个需求需要硬件支持&#xff0c;原本打算使用 Arduino Nano&#xff0c;后来在 Boot 大佬的建议下&#xff0c;买了某宇宙家的 ESP32C3 核心板&#xff0c;对比 Arduino Nano 价格便宜了一大半&#xff0c;而且自身就集成了 WIFI 和 BLE 模块&#xff0c;还不用…

(一)before initialization of D3D(初始化D3D之前你需要了解的D3D基础知识)

什么是D3D? D3D全称Direct X 3D,即一组API可以用来针对GPU编程,不过他最主要的作用是用来渲染(不过现在也有很多其他应用比如d3d11va[Direct X 3D 11 Video API]用来进行硬件加速解码) Tips:Direct X 3D主要用来渲染,既然我们说到可以针对GPU编程了,当然不只是渲染的工作可以…

国考省考行测:数量关系,牛吃草问题,比例问题

国考省考行测&#xff1a;数量关系&#xff0c;牛吃草问题 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#xff0c;而常规国考省考最重要的还是申论和行测&#xff0c;所以大家认真准备吧&#xff0c;我讲一起屡屡申论…

〖Python网络爬虫实战㉘〗- Selenium案例实战(二)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…

图神经网络(处理点云)PPFNet的实现

文章说明&#xff1a; 1)参考资料&#xff1a;PYG官方文档。超链。 2)博主水平不高&#xff0c;如有错误还望批评指正。 3)我在百度网盘上传了这篇文章的jupyter notebook和有关文献。超链。提取码8848。 文章目录 前言文献阅读代码实操历史遗留问题 前言 本篇文章接上一篇文章…

今年的面试难度,我给跪了……

大家好&#xff0c;最近有不少小伙伴在后台留言&#xff0c;又得准备面试了&#xff0c;不知道从何下手&#xff01; 不论是跳槽涨薪&#xff0c;还是学习提升&#xff01;先给自己定一个小目标&#xff0c;然后再朝着目标去努力就完事儿了&#xff01; 为了帮大家节约时间&a…