编程笔记 html5&css&js 073 JavaScript Object数据类型

简介: 编程笔记 html5&css&js 073 JavaScript Object数据类型


JavaScript 中的 Object 数据类型是该语言中最复杂也最灵活的数据类型之一,它是其他所有内置对象和用户自定义对象的基础。在 JavaScript 中,几乎任何东西都可以视为对象,包括函数、数组甚至是基本数据类型(通过包装对象)。

一、创建 Object

  1. 使用构造函数创建
// 使用 new 关键字调用 Object 构造函数创建一个空对象
let obj1 = new Object();
// 或者带初始属性
let obj2 = new Object({ name: 'Alice', age: 30 });
// 等同于
let obj3 = {};
// 带初始属性
let obj4 = { name: 'Bob', age: 35 };
  1. 使用对象字面量创建
    这是最常见也是最简洁的创建对象的方式,直接用花括号包裹属性名与对应的值。
let person = {
  firstName: 'John',
  lastName: 'Doe',
  address: {
    street: '123 Main St.',
    city: 'Anytown',
    country: 'USA'
  },
  getFullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};
console.log(person.getFullName()); // 输出 "John Doe"

二、Object 类型的属性与方法

  • constructor:每个对象实例都有一个 constructor 属性,它指向用于创建该对象的函数引用。
console.log(person.constructor); // 输出:ƒ Object() { [native code] }
  • hasOwnProperty(propertyName):用于检查对象自身(不包括原型链)是否具有指定名称的属性。
console.log(person.hasOwnProperty('firstName')); // 输出:true
  • isPrototypeOf(object):这个方法不是在对象实例上调用,而是在构造函数或任何父级对象上调用,以检查传入的对象是否是其原型链的一部分。
function Person(name) {
  this.name = name;
}
let john = new Person('John');
console.log(Person.prototype.isPrototypeOf(john)); // 输出:true
  • propertyIsEnumerable(propertyName):检查给定的属性是否可枚举。
console.log(person.propertyIsEnumerable('firstName')); // 输出:true
  • toLocaleString():返回对象的字符串表示形式,通常依据本地化环境来格式化。
let dateObj = new Date();
console.log(dateObj.toLocaleString()); // 输出当前日期时间的本地化格式

此外,Object 类型还提供了诸如 toString()valueOf()getOwnPropertyDescriptor()getPrototypeOf()keys()values()entries() 等方法,以及 ECMAScript 6 引入的 Object.assign()Object.create()Object.defineProperties()Object.defineProperty() 等更高级的方法,用于操作对象属性和原型链。

三、示例

let myObject = {
  a: 1,
  b: 'two',
  c: true,
  method: function() {
    console.log('Method called on the object!');
  }
};
// 添加动态属性
myObject.d = [1, 2, 3];
// 检查属性存在性
console.log(myObject.hasOwnProperty('a')); // 输出:true
console.log(myObject.propertyIsEnumerable('b')); // 输出:true
// 调用对象上的方法
myObject.method(); // 在控制台输出 'Method called on the object!'
// 获取对象的所有可枚举属性名
console.log(Object.keys(myObject)); // 输出:[ 'a', 'b', 'c', 'method', 'd' ]

四、参考

JavaScript 中的 Object 类型和 C++ 语言中的 object(或类)在概念和实现上有很大的不同,主要区别如下:

  1. 定义与本质
  • JavaScript:在 JavaScript 中,Object 是所有对象的基础类型。每个非原始值都是一个 Object 或是其原型链上的某个对象的实例。这意味着数组、函数、日期等都继承自 Object 原型。在 JavaScript 中,你创建的任何自定义对象也是基于 Object 构造函数的。
  • C++:C++ 是一种静态类型语言,它有类(class)的概念,类是对一组具有相同特征和行为的对象的抽象描述。当你定义一个类时,可以声明成员变量(属性)和成员函数(方法)。C++ 中没有内置的 object 类,但所有的类实例都可以看作是对象。
  1. 动态性与静态性
  • JavaScript:JavaScript 对象是动态的,可以在运行时添加或删除属性,并且支持原型继承(基于原型链的继承机制)。
  • C++:C++ 的对象结构在编译时就已经确定,属性和方法必须在类定义时指定,不能像 JavaScript 那样动态地增加或删除成员。C++ 使用的是类继承机制,子类在编译时就必须明确其父类。
  1. 内存管理
  • JavaScript:JavaScript 引擎自动管理对象的生命周期,通过垃圾回收机制来释放不再使用的对象所占用的内存。
  • C++:C++ 不提供自动垃圾回收机制,程序员需要手动管理对象的内存分配与释放,可以通过构造函数/析构函数、new/delete运算符或者智能指针等方式进行内存管理。
  1. 类型系统
  • JavaScript:JavaScript 是弱类型语言,对象的类型检查较为灵活,变量可以动态改变类型,typeof操作符返回“object”表示非原始类型的值,包括自定义对象和内置对象实例。
  • C++:C++ 是强类型语言,每个对象都有固定的类型,类型转换需要显式进行,编译器会在编译阶段执行严格的类型检查。
  1. 实例化方式
  • JavaScript:使用字面量语法或 new 关键字调用构造函数来创建对象实例。
  • C++:使用 new 关键字结合类名来创建对象实例,也可以通过栈上直接定义(对于局部小对象)或在堆上动态分配。
  1. 面向对象特性
  • JavaScript:尽管不是纯面向对象语言,但提供了封装(通过闭包)、继承(通过原型链或ES6的class关键字)和多态(通过原型委托和函数重载)等功能。
  • C++:全面支持面向对象编程的所有基本特性,包括封装(通过访问修饰符public, private, protected)、继承(通过class派生)、多态(通过虚函数和抽象类)等。同时C++还支持运算符重载等其他面向对象语言不一定具有的特性。

小结

数据类型的概念与定义在不同语言中的区别较大,如果以后学习其他编程语言时注意区分。

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
2月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
106 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
7月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
210 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应