在 JavaScript 中如何定义一个对象

news/2025/2/23 10:16:24

今天,同事(已经 从事前端开发4 年有余了,从一开始就是使用 vue 和 react ,结合着 webpack 写这个 ES6 相关的东西,很少接触到有关 ES6 之前的东西 的写法)问了我一个问题,说有一个东西不知道怎么去进行迁移(即看不懂),即类似于以下的这样的形式内容;

javascript">
function FunObj() { }
FunObj.prototype.getRandom = function (min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

FunObj.prototype.getRandomColor = function () {
  let r = this.getRandom(0, 256);
  let g = this.getRandom(0, 256);
  let b = this.getRandom(0, 256);
  return "rgb(" + r + "," + g + "," + b + ")";
}

当我看到他问的这个问题的时候,我当时心里一惊,这不就是我们(我是 10 年开始接触前端14 年正式进入前端工作)曾经经常写的JavaScript 的对象定义么,他居然看不懂,后来一想也是,毕竟从他们出来,接触的东西,跟我们刚出来的时候接触的东西差别还是挺大的,就比如说 ES6 之前的对象定义、对象继承等等;其实也并非他们不努力,只是说接触的东西少,现在写的都现代化的一些东西。

接下来,我就简单的总结一下,如何在 JavaScript 中进行定义对象:

1. 对象字面量

这是最常见的方式,使用花括号 {} 定义对象,属性和方法用键值对表示。

const person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

console.log(person.name); // 输出: Alice
person.greet(); // 输出: Hello, my name is Alice

2. 使用 new Object()

通过 new Object() 创建对象,然后添加属性和方法。

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function() {
    console.log("Hello, my name is " + this.name);
};

console.log(person.name); // 输出: Bob
person.greet(); // 输出: Hello, my name is Bob

3. 构造函数

通过构造函数创建对象,适合需要创建多个相似对象的场景。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log("Hello, my name is " + this.name);
    };
}

const person1 = new Person("Charlie", 35);
const person2 = new Person("David", 40);

console.log(person1.name); // 输出: Charlie
person2.greet(); // 输出: Hello, my name is David

4. Object.create()

使用 Object.create() 基于现有对象创建新对象。

const personPrototype = {
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

const person = Object.create(personPrototype);
person.name = "Eve";
person.age = 28;

console.log(person.name); // 输出: Eve
person.greet(); // 输出: Hello, my name is Eve

5. ES6 类

使用 ES6 的 class 语法定义对象。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("Hello, my name is " + this.name);
    }
}

const person = new Person("Frank", 45);

console.log(person.name); // 输出: Frank
person.greet(); // 输出: Hello, my name is Frank

总结

  • 对象字面量:简单直接。
  • new Object():较少使用。
  • 构造函数:适合创建多个相似对象。
  • Object.create():基于原型创建对象。
  • ES6 类:现代语法,适合复杂对象。

根据需求选择合适的方式。


http://www.niftyadmin.cn/n/5863306.html

相关文章

【Linux】35.封装 UdpSocket(2)

文章目录 2. 实现一个简易的聊天室应用2.1 log.hpp - 日志记录系统2.2 Terminal.hpp - 终端重定向管理器2.3 UdpClient.cc - 多线程聊天客户端2.4 UdpServer.hpp - 广播式聊天服务器2.5 main.cc - 服务器启动程序 2. 实现一个简易的聊天室应用 2.1 log.hpp - 日志记录系统 lo…

【QT】信号与槽 窗口坐标

🌈 个人主页:Zfox_ 🔥 系列专栏:Qt 目录 一:🔥 Qt 中的窗口坐标 二:🔥 信号和槽 🦋 信号和槽概述🦋 信号的本质🦋 槽的本质 三:&#…

实验题目:SQL 数据更新、视图

一、实验环境 实验使用普通PC机一台,MySQL数据库版本8.0.36,使用Navicat Premium 16提供图形化界面。 二、实验内容 1、insert 语句使用方法 2、update 语句使用方法 3、delete 语句使用方法 4、掌握 truncate table 语句使用方法 5、掌握视图的创…

分布式锁实现(数据库+Redis+Zookeeper)

1. 数据库分布式锁 实现原理 基于唯一索引: 创建一张锁表,通过唯一索引(如锁名称)保证互斥性。 加锁:插入一条记录,成功则获取锁,失败则重试。 解锁:删除对应记录。 乐观锁&…

Vue3 + Spring WebMVC 验证码案例中的跨域问题与解决方法

最近在基于vue3 SpringWebMVC前后端分离的开发环境中实现一个验证码的案例,在开发过程中遇到了一些复杂的跨域问题,现已解决,故将解决方法分享,希望能帮到有需要的人。 出现的问题: 对于验证码的实现,我选…

deepseek自动化代码生成

使用流程 效果第一步:注册生成各种大模型的API第二步:注册成功后生成API第三步:下载vscode在vscode中下载agent,这里推荐使用cline 第四步:安装完成后,设置模型信息第一步选择API provider: Ope…

Python基于Django的广州、北京、杭州二手房房价可视化分析系统(附源码)

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…

4. grafana(7.5.17)功能菜单简介

点击可以返回home页面 搜索Dashboard 新建按钮:用户创建Dashboard、文件夹。以及导入外部(社区)Dashboard 用于查看活管理Dashboard,包括home、Manage、playlists、snapshots功能 explore(探索)&#x…