想品客老师的第天:类

类是一个优化js面向对象的工具

类的声明

        //1、class User{}console.log(typeof User)//function//2、let Hd=class{}//其实跟1差不多class Stu{show(){}//注意这里不用加逗号,对象才加逗号get(){console.log('后盾人')}}let hd=new Stu()hd.get()//后盾人

类的原理

类的本质就是个函数,也就相当于【根据这个函数的原型的constructor】

class User{}
console.log(User===User.prototype.constructor)//true

类其实就是个语法糖的结构,意思是确实好用但是你又得背了。。。

类里面直接的、不加任何修饰的内容,都是默认写在原型里的:

class User{show(){console.log('我是个公共属性')
}}
console.dir(User);

类里面有个constructor函数,这个方法的功能是初始化内部的属性,和function里的this.属性名是一个作用:

  class User {constructor(name) {this.name = name//和下面是一个作用}}// console.log(User === User.prototype.constructor)//trueconsole.dir(User);function Hd(name) {this.name = name//和上面是一个作用}console.dir(Hd)

对象属性的声明

可以使用简单的this指针改变属性值为传入的形参,也可以用下面这种方法,更灵活:

 class User {site = "后盾人";constructor(name) {this.name = name;}changeSite(value) {this.site = value;}show() {return `${this.site}:${this.name}`;}}let hd = new User("后盾人");hd.changeSite("houdunren")//通过内部的方法声明hd对象内部的属性console.log(hd.show());

类的遍历

上一篇我们提到了有些方法存在原型中,我们不需要遍历,只能用if (h.hasOwnProperty(key))来解决

而类就可以轻松做到这个,因为class声明的方法不能遍历

   class Hd {constructor(name) {this.name = name}show() {console.log('我在原型里')}}let h = new Hd()for (const key in h) {console.log(key)//只打印name,不打印show方法}

class默认在严格模式下的运行

这是一般函数在严格模式下的执行:

class Hd {show() {function test() {console.log(this); // 严格模式下,this 是 undefined}test(); // 直接调用,没有绑定 this}
}let hd = new Hd();
hd.show(); // 在严格模式下,test() 中的 this 是 undefined

而类里面直接就按严格模式执行

class Hd {show() {function test() {console.log(this);}test();}}let hd = new Hd();hd.show();

静态属性的使用

静态成员是就是构造函数或类里的属性和方法,静态属性就是构造函数或类里面的属性

在构造函数里定义静态属性:

  function Web(url) {this.url = url;}Web.url = "hdcms.com";let hd = new Web("houdunren.com");console.log(hd);console.dir(Web);

在类里面设置静态属性

class Request {static host = "https://www.houdunren.com";api(url) {return Request.host + `/${url}`;}}let obj = new Request();console.log(obj.api("article"));

像这种不改变的静态地址,最好前面加上static

静态方法的实现原理

在类中使用访问器

前面学过访问器,这是访问器在类的使用:

   class Request {constructor(host) {this.data = {}this.host = host}set host(url) {if (!/^https:?\/\//i.test(url)) {throw new Error('地址错误')}this.data.host = url}get host() {return this.data['host']}}let hd = new Request('https://houdunren.com')

属性保护

用命名原则保护属性

意思就是约定俗成的【下划线开头的】属性就是私有属性

 class User {_url = "https://houdunren.com";//被保护的,外部访问不了constructor(name) {this.name = name;}set url(url) {//但是url可以访问if (!/^https?:/i.test(url)) {throw new Error("非常网址");}this._url = url;}}let hd = new User("后盾人");hd.name = "李四";hd.url = "https://hdcms.com";//所以通过url改变_urlconsole.log(hd);

使用Symbol定义protected属性

关于symbol可以保护数据这里之前在对象学过类似的概念,但是我没懂:

如果想保存的话可以把属性定为私有属性,symbol可以让他变成私有属性

"use strict";const DATA = Symbol();const user = {// name: "后盾人",[DATA]: { name },age: 10,set name(value) {this[DATA].name = value;},get name() {return this[DATA].name;}};user.name = "hdcms";// user.data.name = "你好";console.log(user[Symbol()])

那你就要问了:symbol和私有属性什么关系,为啥symbol可以防止被修改?

deepseek太卡了,我们有请老朋友chatgpt作答:

Symbol 本身并没有提供不可修改(immutable)功能。它只是保证了每个 Symbol 是唯一的,也就是说它保证了属性键的唯一性,而不是数据本身的不可修改性。
但是,使用 Symbol 作为属性键可以间接达到“数据隐私”和“不可直接访问”的目的,因为 Symbol 属性不容易被外部直接修改。
怎么间接达到的?因为我们无法通过常规的方式来访问symbol定义的属性名的属性了:

const DATA = Symbol("privateData"); // 创建一个唯一的 Symbol
const user = {[DATA]: { name: "Alice", age: 25 }, // 用 Symbol 创建私有数据get name() {return this[DATA].name;},set name(value) {this[DATA].name = value;}
};console.log(user.name);  // "Alice"
user.name = "Bob";       // 调用 setter
console.log(user.name);  // "Bob"// 但是我们不能直接访问或修改 [DATA] 属性
console.log(user[DATA]); // undefined

在这个例子中,[DATA] 是一个私有的 Symbol 属性。虽然你可以通过 name 的 getter 和 setter 修改 name,但是无法直接通过 user[DATA] 来访问或修改 name。这是因为 Symbol 提供了 唯一性,使得你无法直接通过常规方式访问这个属性。

这样就只能用访问器修改数据了?了吗??

 "use strict";const DATA = Symbol();const user = {// name: "后盾人",[DATA]: { name },age: 10,set name(value) {this[DATA].name = value;},get name() {return this[DATA].name;}};//user.name = "hdcms";user[DATA].name='荷叶饭'console.log(user[DATA])

可是我这么写的时候修改成功了啊?后盾人你在说什么?

 const protecteds = Symbol();class Common {constructor() {this[protecteds] = {};this[protecteds].host = "https://houdunren.com";}set host(url) {if (!/^https?:/i.test(url)) {throw new Error("非常网址");}this[protecteds].host = url;}get host() {return this[protecteds].host;}}class User extends Common {constructor(name) {super();this[protecteds].name = name;}get name() {return this[protecteds].name;}}let hd = new User("后盾人");hd.host = "https://www.hdcms.com";console.log(hd.name);

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

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

相关文章

【Git】初识Git Git基本操作详解

文章目录 学习目标Ⅰ. 初始 Git💥注意事项 Ⅱ. Git 安装Linux-centos安装Git Ⅲ. Git基本操作一、创建git本地仓库 -- git init二、配置 Git -- git config三、认识工作区、暂存区、版本库① 工作区② 暂存区③ 版本库④ 三者的关系 四、添加、提交更改、查看提交日…

基于单片机的盲人智能水杯系统(论文+源码)

1 总体方案设计 本次基于单片机的盲人智能水杯设计,采用的是DS18B20实现杯中水温的检测,采用HX711及应力片实现杯中水里的检测,采用DS1302实现时钟计时功能,采用TTS语音模块实现语音播报的功能,并结合STC89C52单片机作…

深入解析“legit”的地道用法——从俚语到正式表达:Sam Altman用来形容DeepSeek: legit invigorating(真的令人振奋)

深入解析“legit”的地道用法——从俚语到正式表达 一、引言 在社交媒体、科技圈甚至日常对话中,我们经常会看到或听到“legit”这个词。比如最近 Sam Altman 在 X(原 Twitter)上发的一条帖子中写道: we will obviously deliver …

微机原理与接口技术期末大作业——4位抢答器仿真

在微机原理与接口技术的学习旅程中,期末大作业成为了检验知识掌握程度与实践能力的关键环节。本次我选择设计并仿真一个 4 位抢答器系统,通过这个项目,深入探索 8086CPU 及其接口技术的实际应用。附完整压缩包下载。 一、系统设计思路 &…

【大模型LLM面试合集】大语言模型架构_MHA_MQA_GQA

MHA_MQA_GQA 1.总结 在 MHA(Multi Head Attention) 中,每个头有自己单独的 key-value 对;标准的多头注意力机制,h个Query、Key 和 Value 矩阵。在 MQA(Multi Query Attention) 中只会有一组 k…

【Transformer】手撕Attention

import torch from torch import nn import torch.functional as F import mathX torch.randn(16,64,512) # B,T,Dd_model 512 # 模型的维度 n_head 8 # 注意力头的数量多头注意力机制 class multi_head_attention(nn.Module): def __init__(self, d_model, n_hea…

【Linux】 冯诺依曼体系与计算机系统架构全解

Linux相关知识点可以通过点击以下链接进行学习一起加油!初识指令指令进阶权限管理yum包管理与vim编辑器GCC/G编译器make与Makefile自动化构建GDB调试器与Git版本控制工具Linux下进度条 冯诺依曼体系是现代计算机设计的基石,其统一存储和顺序执行理念推动…

冯·诺依曼体系结构

目录 冯诺依曼体系结构推导 内存提高冯诺依曼体系结构效率的方法 你使用QQ和朋友聊天时,整个数据流是怎么流动的(不考虑网络情况) 与冯诺依曼体系结构相关的一些知识 冯诺依曼体系结构推导 计算机的存在就是为了解决问题,而解…

全面认识了解DeepSeek+利用ollama在本地部署、使用和体验deepseek-r1大模型

文章目录 一、DeepSeek简介二、技术特点三、架构设计3.1、DeepSeek-V33.2、DeepSeek-V23.3、DeepSeek-R1 四、DeepSeek算法4.1、DeepSeek LLM 算法4.2、DeepSeek-V2 算法4.3、DeepSeek-R1 算法4.4、DeepSeek 在算力优化上的算法 五、DeepSeek的使用六、本地部署DeepSeek R1模型…

Python 梯度下降法(七):Summary

文章目录 Python 梯度下降法(七):Summary一、核心思想1.1 核心思想1.2 优化方法概述1.3 第三方库的使用 二、 BGD2.1 介绍2.2 torch 库算法2.2 代码示例2.3 SGD2.4 SGD代码示例2.5 MBGD2.6 MBGD 代码示例 三、 Adagrad3.1 介绍3.2 torch 库算…

SpringBoot Web开发(SpringMVC)

SpringBoot Web开发(SpringMVC) MVC 核心组件和调用流程 Spring MVC与许多其他Web框架一样,是围绕前端控制器模式设计的,其中中央 Servlet DispatcherServlet 做整体请求处理调度! . 除了DispatcherServletSpringMVC还会提供其他…

Web_php_unserialize

代码审计 <?php class Demo { private $file index.php;public function __construct($file) { $this->file $file; }、 //接收一个参数 $file 并赋值给私有属性 $filefunction __destruct() { echo highlight_file($this->file, true); } //在对象销毁时调用&…

Spring Web MVC基础第一篇

目录 1.什么是Spring Web MVC&#xff1f; 2.创建Spring Web MVC项目 3.注解使用 3.1RequestMapping&#xff08;路由映射&#xff09; 3.2一般参数传递 3.3RequestParam&#xff08;参数重命名&#xff09; 3.4RequestBody&#xff08;传递JSON数据&#xff09; 3.5Pa…

安装anaconda3 后 电脑如何单独运行python,python还需要独立安装吗?

安装anaconda3 后 电脑如何单独运行python&#xff0c;python还需要独立安装吗? 电脑第一此安装anaconda用于jupyter notebook使用。 但是在运行cmd的时候&#xff0c;输入python --version 显示未安装或跳转商店提示安装。 明明我可以运行python但是为什么cmd却说我没安装呢…

分布式事务组件Seata简介与使用,搭配Nacos统一管理服务端和客户端配置

文章目录 一. Seata简介二. 官方文档三. Seata分布式事务代码实现0. 环境简介1. 添加undo_log表2. 添加依赖3. 添加配置4. 开启Seata事务管理5. 启动演示 四. Seata Server配置Nacos1. 修改配置类型2. 创建Nacos配置 五. Seata Client配置Nacos1. 增加Seata关联Nacos的配置2. 在…

使用真实 Elasticsearch 进行高级集成测试

作者&#xff1a;来自 Elastic Piotr Przybyl 掌握高级 Elasticsearch 集成测试&#xff1a;更快、更智能、更优化。 在上一篇关于集成测试的文章中&#xff0c;我们介绍了如何通过改变数据初始化策略来缩短依赖于真实 Elasticsearch 的集成测试的执行时间。在本期中&#xff0…

OpenEuler学习笔记(十四):在OpenEuler上搭建.NET运行环境

一、在OpenEuler上搭建.NET运行环境 基于包管理器安装 添加Microsoft软件源&#xff1a;运行命令sudo rpm -Uvh https://packages.microsoft.com/config/centos/8/packages-microsoft-prod.rpm&#xff0c;将Microsoft软件源添加到系统中&#xff0c;以便后续能够从该源安装.…

基于Python的简单企业维修管理系统的设计与实现

以下是一个基于Python的简单企业维修管理系统的设计与实现&#xff0c;这里我们会使用Flask作为Web框架&#xff0c;SQLite作为数据库来存储相关信息。 1. 需求分析 企业维修管理系统主要功能包括&#xff1a; 维修工单的创建、查询、更新和删除。设备信息的管理。维修人员…

Van-Nav:新年,将自己学习的项目地址统一整理搭建自己的私人导航站,供自己后续查阅使用,做技术的同学应该都有一个自己网站的梦想

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Van-Nav是一个基于Vue.js开发的导航组件库&#xff0c;它提供了多种预设的样式和灵活的配置选项&#xff0c;使得开发者可以轻松地定制出符合项目需求…

Android 音视频编解码 -- MediaCodec

引言 如果我们只是简单玩一下音频、视频播放&#xff0c;那么使用 MediaPlayer SurfaceView 播放就可以了&#xff0c;但如果想加个水印&#xff0c;加点其他特效什么的&#xff0c;那就不行了&#xff1b; 学习 Android 自带的硬件码类 – MediaCodec。 MediaCodec 介绍 在A…