当前位置：首页 > news >正文

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？

news 来源：原创 2025/9/18 22:15:13

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？

JavaScript 创建对象的方式

在 JavaScript 中，有多种方式可以创建对象，这里主要介绍对象字面量和构造函数这两种常见的方式。

1. 对象字面量

对象字面量就像是你直接“画”出一个对象。你可以用一对花括号 {} 来创建一个对象，在花括号里面可以直接定义对象的属性和方法。这种方式非常直观，就像你直接告诉别人这个对象有什么“东西”（属性和方法）。

代码示例：

// 使用对象字面量创建一个人对象
let person = {// 定义属性name: '张三',age: 25,// 定义方法sayHello: function() {console.log('你好，我是'+ this.name + '，今年'+ this.age + '岁。');}
};// 调用对象的方法
person.sayHello();

在这个例子中，我们用对象字面量创建了一个 person 对象，它有 name 和 age 属性，还有一个 sayHello 方法。

2. 构造函数

构造函数就像是一个“对象工厂”。你先定义一个函数，这个函数就像是一个模板，然后通过 new 关键字来使用这个模板创建多个对象。每个用这个模板创建的对象都有相同的结构，但属性值可以不同。

代码示例：

// 定义一个构造函数
function Person(name, age) {// 定义属性this.name = name;this.age = age;// 定义方法this.sayHello = function() {console.log('你好，我是'+ this.name + '，今年'+ this.age + '岁。');};
}// 使用构造函数创建对象
let person1 = new Person('张三', 25);
let person2 = new Person('李四', 30);// 调用对象的方法
person1.sayHello(); 
person2.sayHello();

在这个例子中，Person 就是一个构造函数，我们用它创建了 person1 和 person2 两个对象，它们都有 name、age 属性和 sayHello 方法，但具体的属性值不同。

对象字面量和构造函数创建对象的区别

1. 创建方式的直观性

对象字面量：非常直观，就像直接在纸上写出对象的样子，一眼就能看出对象有哪些属性和方法。适合创建单个、简单的对象。
构造函数：需要先定义一个函数作为模板，然后再用 new 关键字创建对象。相对来说没那么直观，但适合创建多个具有相同结构的对象。

2. 代码复用性

对象字面量：如果要创建多个结构相同的对象，每个对象都需要重新写一遍属性和方法的定义，代码复用性低。

// 创建两个结构相同的对象，需要重复写属性和方法
let personA = {name: '张三',age: 25,sayHello: function() {console.log('你好，我是'+ this.name + '，今年'+ this.age + '岁。');}
};let personB = {name: '李四',age: 30,sayHello: function() {console.log('你好，我是'+ this.name + '，今年'+ this.age + '岁。');}
};

构造函数：可以通过一个构造函数创建多个对象，只需要定义一次属性和方法，代码复用性高。

function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log('你好，我是'+ this.name + '，今年'+ this.age + '岁。');};
}let person1 = new Person('张三', 25);
let person2 = new Person('李四', 30);

3. 原型和继承方面

对象字面量：每个对象字面量创建的对象都有自己独立的属性和方法，没有明显的原型和继承关系。

let obj1 = { key: 'value1' };
let obj2 = { key: 'value2' };
// obj1 和 obj2 之间没有继承关系

构造函数：通过构造函数创建的对象会继承构造函数原型上的属性和方法。可以利用原型链实现对象间的继承，提高代码的可扩展性。

function Person(name) {this.name = name;
}// 给 Person 的原型添加方法
Person.prototype.sayHello = function() {console.log('你好，我是'+ this.name);
};let person = new Person('张三');
// person 对象继承了 Person 原型上的 sayHello 方法
person.sayHello();

那么构造函数创建对象时，this的指向是如何确定的？

在 JavaScript 里，使用构造函数创建对象时，this 的指向有着特定的规则，下面详细解释并通过代码示例说明。

基本原理

当使用 new 关键字调用构造函数创建对象时，this 指向新创建的对象。可以把构造函数想象成一个“对象加工厂”，new 关键字就是启动这个加工厂的按钮，当按下按钮后，加工厂会生产出一个新的对象，而 this 就像是这个新对象的“代言人”，在构造函数里对 this 进行操作，其实就是在对新创建的对象进行操作。

代码示例

// 定义一个构造函数 Person
function Person(name, age) {// 这里的 this 指向新创建的对象this.name = name;this.age = age;this.sayHello = function() {console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁。`);};
}// 使用 new 关键字调用构造函数创建对象
let person1 = new Person('张三', 25);
let person2 = new Person('李四', 30);// 调用对象的方法
person1.sayHello(); 
person2.sayHello();

在上面的代码中：

当执行 let person1 = new Person('张三', 25); 时，new 关键字做了以下几件事：
- 创建一个新对象。
- 让 this 指向这个新对象。
- 执行构造函数 Person 里的代码，也就是把 name 和 age 属性添加到新对象上，同时添加 sayHello 方法。
- 如果构造函数没有显式返回一个对象，那么就返回 this 所指向的新对象。所以最终 person1 就是这个新创建的对象。
同理，let person2 = new Person('李四', 30); 也创建了一个新对象，this 指向这个新对象，并且给这个新对象添加了相应的属性和方法。

特殊情况

如果构造函数显式返回了一个对象，那么 new 表达式的结果就是这个返回的对象，而不是 this 所指向的对象。但如果返回的不是一个对象（比如返回基本数据类型），那么还是会返回 this 所指向的对象。

显式返回对象的情况

function Car() {this.brand = '丰田';// 显式返回一个对象return {brand: '宝马'};
}let myCar = new Car();
console.log(myCar.brand); // 输出: 宝马

在这个例子中，构造函数 Car 显式返回了一个对象 { brand: '宝马' }，所以 myCar 就是这个返回的对象，而不是 this 所指向的原本要创建的对象。

显式返回基本数据类型的情况

function Dog() {this.name = '旺财';// 显式返回一个基本数据类型return 123;
}let myDog = new Dog();
console.log(myDog.name); // 输出: 旺财

这里构造函数 Dog 显式返回了一个基本数据类型 123，但 new Dog() 还是返回了 this 所指向的对象，所以 myDog 就是原本要创建的对象，包含 name 属性。

JavaScript中this的概念和作用
在 JavaScript 里，this 是一个非常重要且有些复杂的概念，它就像一个灵活的“指针”，在不同的场景下会指向不同的对象。下面详细解释 this 的概念、作用以及在不同场景下的指向。

概念

this 是 JavaScript 中的一个关键字，它是一个特殊的对象引用，在代码运行时会根据函数的调用方式动态地指向不同的对象。简单来说，this 就像是一个“替身”，代表着当前执行代码所处的上下文对象。

作用

this 的主要作用是让函数可以灵活地访问和操作不同的对象，提高代码的复用性和灵活性。通过 this，函数可以根据调用它的对象来动态地获取和修改对象的属性和方法。

不同场景下 `this` 的指向

1. 全局作用域中

在全局作用域中，this 指向全局对象。在浏览器环境中，全局对象是 window 对象；在 Node.js 环境中，全局对象是 global 对象。

// 在浏览器环境中
console.log(this === window); // 输出: true// 定义一个全局变量
var globalVar = '我是全局变量';
// 可以通过 this 访问全局变量
console.log(this.globalVar); // 输出: 我是全局变量

2. 函数内部

普通函数调用：当函数作为普通函数调用时，this 指向全局对象（在严格模式下，this 为 undefined）。

function test() {console.log(this);
}test(); 
// 在浏览器环境中，输出: Window 对象

在严格模式下：

'use strict';
function test() {console.log(this);
}test(); 
// 输出: undefined

方法调用：当函数作为对象的方法调用时，this 指向调用该方法的对象。

const person = {name: '张三',sayHello: function() {console.log('你好，我是'+ this.name);}
};person.sayHello(); 
// 输出: 你好，我是 张三

这里 sayHello 方法是作为 person 对象的方法调用的，所以 this 指向 person 对象。

3. 构造函数中

当使用 new 关键字调用构造函数创建对象时，this 指向新创建的对象。

function Person(name) {this.name = name;this.sayHello = function() {console.log('你好，我是'+ this.name);};
}const person1 = new Person('李四');
person1.sayHello(); 
// 输出: 你好，我是 李四

在 Person 构造函数中，this 指向新创建的 person1 对象。

4. 箭头函数中

箭头函数没有自己的 this，它的 this 继承自外层函数（定义时的上下文）。

const obj = {name: '王五',sayHello: function() {const arrowFunc = () => {console.log('你好，我是'+ this.name);};arrowFunc();}
};obj.sayHello(); 
// 输出: 你好，我是 王五

在这个例子中，箭头函数 arrowFunc 中的 this 继承自外层的 sayHello 函数，而 sayHello 函数作为 obj 对象的方法调用，所以 this 指向 obj 对象。

5. `call`、`apply` 和 `bind` 方法中

call、apply 和 bind 是函数的三个方法，它们可以用来显式地指定函数内部 this 的指向。
call 和 apply 方法会立即调用函数，并指定 this 的值。区别在于 call 方法接收参数列表，而 apply 方法接收一个数组作为参数。

function greet(message) {console.log(message + '，我是'+ this.name);
}const personA = { name: '赵六' };
const personB = { name: '孙七' };// 使用 call 方法
greet.call(personA, '你好'); 
// 输出: 你好，我是 赵六// 使用 apply 方法
greet.apply(personB, ['哈喽']); 
// 输出: 哈喽，我是 孙七

bind 方法会创建一个新的函数，在调用时 this 值会被绑定到指定的对象上，但不会立即调用函数。

function greet(message) {console.log(message + '，我是'+ this.name);
}const personC = { name: '周八' };
const boundGreet = greet.bind(personC);
boundGreet('嗨'); 
// 输出: 嗨，我是 周八

综上所述，this 的指向取决于函数的调用方式，理解不同场景下 this 的指向是掌握 JavaScript 的关键之一。

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？ JavaScript 创建对象的方式在 JavaScript 中，有多种方式可以创建对象，这里主要介绍对象字面量和构造函数这两种常见的方式。 1. 对象字面量对象字面量…...

编程日记 2025/9/18 22:15:13

【量化科普】Sharpe Ratio，夏普比率

【量化科普】Sharpe Ratio，夏普比率 🚀🚀🚀量化软件开通🚀🚀🚀 🚀🚀🚀量化实战教程🚀🚀🚀 在量化投资领域，…...

编程日记 2025/9/18 22:08:36

知识蒸馏知识点

1基于kl散度计算，学生模型需要用log_softmax处理 2 为了避免温度对梯度的影响，loss*T**2 操作目的教师 / 学生输出除以软化概率分布，暴露类别间关系损失乘以抵消温度对梯度的缩放，维持梯度量级稳定，确保训练收敛性 import torch import torch.nn.functional as F# 原…...

编程日记 2025/9/18 22:08:06

Springboot + Ollama + IDEA + DeepSeek 搭建本地deepseek简单调用示例

1. 版本说明 springboot 版本 3.3.8 Java 版本 17 spring-ai 版本 1.0.0-M5 deepseek 模型 deepseek-r1:7b 需要注意一下Ollama的使用版本： 2. springboot项目搭建可以集成在自己的项目里，也可以到 spring.io 生成一个项目生成的话，如下…...

编程日记 2025/9/15 10:57:16

【MySQL】MySQL表的增删改查（进阶）

1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

编程日记 2025/9/18 22:15:12

装修流程图：装修前准备 → 设计阶段 → 施工阶段 → 安装阶段 → 收尾阶段 → 入住

文章目录引言I 毛坯房装修的全流程**1. 装修前准备****1.1 确定装修预算****1.2 选择装修方式****1.3 选择装修公司****1.4 办理装修手续****2. 设计阶段****2.1 量房****2.2 设计方案****2.3 确认方案****3. 施工阶段****3.1 主体拆改****3.2 水电改造****3.3 防水工程****3.…...

编程日记 2025/9/15 10:57:13

JavaScript系列（79）--Web Worker 高级应用

Web Worker 高级应用 🔄 Web Worker 为JavaScript提供了真正的多线程能力，让我们能够在后台线程中执行复杂的计算而不阻塞主线程。今天让我们深入探讨Web Worker的高级应用。 Web Worker 概述 🌟 💡 小知识：Web Work…...

编程日记 2025/9/15 8:23:13

人工智能之自动驾驶技术体系

自动驾驶技术体系自动驾驶技术是人工智能在交通领域的重要应用，旨在通过计算机视觉、传感器融合、路径规划等技术实现车辆的自主驾驶。自动驾驶不仅能够提高交通效率，还能减少交通事故和环境污染。本文将深入探讨自动驾驶的技术体系，包括感…...

编程日记 2025/9/15 8:23:11

该如何搭建高效的跨境网络专线？

在如今这个全球化的商业环境中，跨境网络专线成为了企业与个人实现高效、安全跨国通信的重要工具。大家好，在接下来的内容中，我将深入为您探讨跨境网络专线的概念、特点以及搭建流程，帮助您更好地理解和利用这一技术。一、什么是…...

编程日记 2025/9/15 8:23:08

网络运维学习笔记 017HCIA-Datacom综合实验01

文章目录综合实验1实验需求总部特性分支8分支9 配置一、基本配置（IP二层VLAN链路聚合）ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

编程日记 2025/9/15 8:23:06

Redis数据结构-String字符串

1.String字符串字符串类型是Redis中最基础的数据结构，关于数据结构与要特别注意的是：首先Redis中所有的键的类型都是字符串类型，而且其他集中数据结构也都是在字符串类似基础上进行构建，例如列表和集合的元素类型是字符串类型&a…...

编程日记 2025/9/15 8:23:03

个人简历html网页模板，科技感炫酷html简历模板

炫酷动效登录页引言在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效…...

编程日记 2025/9/14 10:14:43

【Python爬虫(39)】掌控全局：分布式爬虫的任务管理与监控之道

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/9/15 8:22:57

输入框元素覆盖冲突

后端响应中的 "trainingKbGroupName": "基础死型" 通过searchForm2.initFormData(rowData[0]);操作会把基础死型四个字填充到<div class"col-sm-5 form-group"> <label class"col-sm-3 control-label">知识点分组名称<…...

编程日记 2025/9/15 8:22:52

R语言学习笔记——确定指标权重：层次分析法/熵权法/CRITIC方法

本文介绍使用R语言确定指标权重的方法，包括：层次分析法、熵权法和CRITIC方法，内容包含了逆向指标正向化处理。 1、层次分析法 #######层次分析法###### ###几何平均法求权重 options(digits 2) library(tidyverse)macro <- tibble(x1c(…...

编程日记 2025/9/15 8:22:50

前端面试之Box盒子布局：核心知识与实战解析

目录引言：布局能力决定前端高度一、盒模型基础：看得见的像素战争 1. 标准盒模型 vs IE盒模型 2. 核心组成公式 3. 视觉格式化模型二、传统布局三剑客 1. 浮动布局（Float Layout） 2. 定位布局（Position Layou…...

编程日记 2025/9/15 8:22:47

前端VUE+后端uwsgi 环境搭建

1整体架构请求流程the web clinet--the web server->the socket->uwsgi--django 第一级的nginx并不是必须的，uwsgi完全可以完成整个的和浏览器交互的流程；在nginx上加上安全性或其他的限制，可以达到保护程序的作用；uWSGI本…...

编程日记 2025/9/15 8:22:44

保姆级！本地部署DeepSeek-R1大模型安装Ollama Api 后，Postman本地调用 deepseek

要在Postman中访问Ollama API并调用DeepSeek模型，你需要遵循以下步骤。首先，确保你有一个有效的Ollama服务器实例运行中，并且DeepSeek模型已经被加载。可以参考我的这篇博客保姆级！使用Ollama本地部署DeepSeek-R1大模型并java…...

编程日记 2025/9/15 10:57:11

【python】pip命令合集

文章目录 1. 包安装与卸载2. 依赖管理与文件操作3. 包下载与构建4. 配置与缓存管理5. 高级调试与日志6. 虚拟环境集成7. 哈希验证与安全8. 实验性功能（可能不稳定）9. 其他实用命令参数大全（全局常用参数）示例场景 conda: 【python…...

编程日记 2025/9/15 10:57:09

【鸿蒙开发】第四十章 Form Kit（卡片开发服务）

目录 1 概述 1.1 卡片使用场景 1.2 服务卡片架构 1.3 亮点/特征 1.4 开发模式 1.5 与相关Kit的关系 1.6 约束限制 2 ArkTS卡片运行机制 2.1 实现原理 2.2 ArkTS卡片的优势 2.3 ArkTS卡片的约束 3 ArkTS卡片相关模块 4 ArkTS卡片开发指导 4.1 创建一个ArkTS卡片 …...

编程日记 2025/9/15 10:57:07

汽车自动驾驶辅助L2++是什么？

自动驾驶辅助级别有哪些？ 依照SAE（SAE International，Society of Automotive Engineers国际自动机工程师学会）的标准，大致划分为6级（L0-L5）： L0人工驾驶：即没有驾驶辅助…...

编程日记 2025/9/15 10:57:06

package com.test.main.b2b;import org.apache.commons.codec.binary.Base64;import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.util.Arrays;/*** author * version 1.0* description: 解谜微信小…...

编程日记 2025/9/15 9:47:46

java项目之城市公园信息管理系统的设计与实现(源码+文档)

风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的城市公园信息管理系统的设计与实现。项目源码以及部署相关请联系风歌，文末附上联系信息。项目简介： 城市公园信息…...

编程日记 2025/9/15 10:57:02

EasyRTC：基于WebRTC与P2P技术，开启智能硬件音视频交互的全新时代

在数字化浪潮的席卷下，智能硬件已成为我们日常生活的重要组成部分，从智能家居到智能穿戴，从工业物联网到远程协作，设备间的互联互通已成为不可或缺的趋势。然而，高效、低延迟且稳定的音视频交互一直是智能硬件领域亟待…...

编程日记 2025/9/15 1:15:00

【前端框架】vue2和vue3的区别详细介绍

Vue 3 作为 Vue 2 的迭代版本，在性能、语法、架构设计等多个维度均有显著的变革与优化。以下详细剖析二者的区别： 响应式系统 Vue 2 实现原理：基于 Object.defineProperty() 方法实现响应式。当一个 Vue 实例创建时，Vue 会遍历…...

编程日记 2025/9/15 10:56:59

23.1 WebBrowser控件

编程日记 2025/9/15 10:56:57

从0-1搭建mac环境最新版

从0-1搭建mac环境先查看自己的芯片信息 bash uname -mbash-3.2$ uname -m arm64这里是自己的型号安装brew xcode-select --install xcode-select -p /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” source /Users/lanren/.…...

编程日记 2025/9/17 14:20:37

Docker-技术架构演进之路

目录一、概述常见概念二、架构演进 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构三、尾声一、概述在进行技术学习过程中&am…...

编程日记 2025/9/15 10:49:43

堆、优先队列、堆排序

堆： 定义： 必须是一个完全二叉树（完全二叉树：完全二叉树只允许最后一行不为满，且最后一行必须从左往右排序，最后一行元素之间不可以有间隔） 堆序性： 大根堆：每个父节点…...

编程日记 2025/9/14 18:57:05

C语言之宏定义

目录前言一、宏定义前操作二、引用自定义.h文件三、宏定义#define 四、对比typedef的差异五、替换一个函数或表达式六、嵌套宏替换七、用宏和typedef创建一个“布尔型数据八、定义有参数的宏总结前言 C语言中的宏定义是一种预处理指令，用来定义常量、函数…...

编程日记 2025/9/15 10:56:51

大语言模型基础

简介 AI大模型是“人工智能预训练大模型”的简称，包含了“预训练”和“大模型”两层含义，二者结合产生了一种新的人工智能模式，即模型在大规模数据集上完成了预训练后无需微调，或仅需要少量数据的微调，就能直接支撑各类应用。AI大模型主要分为三类：大语言模型、CV大模型…...

编程日记 2025/9/15 0:33:24

vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体

vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体，当输入的值为负数时，会自动显示红色字体，对于数值或者金额输入时该功能就非常有用了。查看官网：https://vxetable.cn gitbub：https://github.co…...

编程日记 2025/9/18 15:39:46

Web 自动化测试提速利器：Aqua 的 Web Inspector （检查器）使用详解

Web 自动化测试提速利器：Aqua 的 Web Inspector （检查器）使用详解前言简介一、安装二、Web Inspector 的使用2.1 获取元素定位器（Locators）2.2 将定位器添加到代码2.3 验证定位器2.4 处理 Frames (框架) 总结前言 Je…...

编程日记 2025/9/15 10:56:46

23种设计模式 - 空对象模式

模式定义空对象模式（Null Object Pattern）是一种行为型设计模式，通过用无操作的空对象替代null值，消除客户端对空值的检查，避免空指针异常。其核心是让空对象与真实对象实现相同接口，但空对象不执行实际逻…...

编程日记 2025/9/15 10:56:44

【mysql80 安装】mysql8.0.31 安装修改3306端口

在离线安装 MySQL 时，可以通过修改 MySQL 的配置文件来更改默认的 3306 端口。以下是具体步骤： 1、vim /etc/my.cnf 打开配置文件后，找到 [mysqld] 部分，这是 MySQL 服务的配置区域。在该部分中，找到或添加以下内容&a…...

编程日记 2025/9/15 0:33:25

基于eBPF的全栈可观测性系统：重新定义云原生环境诊断范式

引言：突破传统APM的性能桎梏某头部电商平台采用eBPF重构可观测体系后，生产环境指标采集性能提升327倍：百万QPS场景下传统代理模式CPU占用达63%，而eBPF直采方案仅消耗0.9%内核资源。核心业务的全链路追踪时延从900μs降至18μs&a…...

编程日记 2025/9/15 10:56:40

C语言基础学习指南：从零入门到实战应用——适合零基础学习者与进阶巩固

目录一、C语言概述与开发环境搭建二、核心语法与数据类型三、控制结构与运算符四、函数与模块化编程五、指针与内存管理六、实践建议与资源推荐结语一、C语言概述与开发环境搭建 C语言是一种高效、灵活的通用编程语言，广泛应用于系统开发、嵌入式系…...

编程日记 2025/9/15 10:56:39

软件架构设计：架构风格

一、架构风格概述定义架构风格是对软件系统整体结构和组织方式的抽象描述，提供了一套通用的设计原则和模式。作用提高系统的可维护性、可扩展性和可复用性。帮助开发团队在设计和实现过程中保持一致性和规范性。常见架构风格分层架构、MVC架构、微服务架构、…...

编程日记 2025/9/15 10:56:37

为啥vue3设计不直接用toRefs,而是reactive+toRefs

Vue 3 设计中将 reactive 和 toRefs 结合使用而非直接使用 toRefs，主要基于以下设计考量： 1. 响应式粒度的不同需求 reactive 适用于对象整体响应式 reactive 会为整个对象创建响应式代理，自动追踪对象内部所有属性的变化。这种设计适用于需要…...

编程日记 2025/9/15 10:56:36

go 网络编程 websocket gorilla/websocket

在 Go 语言中，你可以使用标准库中的 net/http 包和第三方库 gorilla/websocket 来实现一个 WebSocket 服务器。gorilla/websocket 库提供了对 WebSocket 协议的高级抽象，使得处理 WebSocket 连接变得相对简单。 package mainimport ("fmt"&qu…...

编程日记 2025/9/15 7:49:40

【微服务】springboot远程docker进行debug调试使用详解

目录一、前言二、线上问题常用解决方案 2.1 微服务线上运行中常见的问题 2.2 微服务线上问题解决方案 2.3 远程debug概述 2.3.1 远程debug原理 2.3.2 远程debug优势三、实验环境准备 3.1 搭建springboot工程 3.1.1 工程结构 3.1.2 引入基础依赖 3.1.3 添加配置文…...

编程日记 2025/9/16 11:33:11