JavaScript对象:深入理解创建、构造与类型

JavaScript对象:深入理解创建、构造与类型

在JavaScript中,对象是核心概念之一,它允许我们创建复杂的数据结构并实现面向对象编程。本文将深入探讨JS对象的创建方式、构造函数机制、包装类原理以及类型判断。

一、对象的创建方式

1. 对象字面量(直接量)

最简洁的对象创建方式,使用花括号语法直接定义属性和方法:

ini 复制代码
// 对象字面量创建
const obj = {
  name: '傅总',
  age: 18
};

// 操作对象
obj.sex = 'boy';  // 新增属性
obj.age = 19;     // 修改属性
delete obj.age;   // 删除属性

2. 使用Object构造函数

通过内置的Object构造函数创建对象:

ini 复制代码
// 使用Object构造函数
const obj2 = new Object();
obj2.name = '李工';
obj2.experience = 5;

3. 自定义构造函数

当需要批量创建相似对象时,使用自定义构造函数:

ini 复制代码
// 自定义构造函数
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

// 通过new创建实例
const p1 = new Person('张三', 18, '男');
const p2 = new Person('李四', 22, '女');

二、构造函数与new操作符

构造函数的作用

构造函数用于创建特定类型的对象,实现对象模板的复用:

ini 复制代码
function Car(color) {
  this.name = 'su7-Ultra';
  this.height = '1400';
  this.lang = '4800';
  this.color = color;
}

// 创建不同颜色的汽车实例
const car1 = new Car('orange');
const car2 = new Car('pink');

// 修改实例属性
car1.name = '劳斯莱斯';

new操作符的内部机制

当使用new调用函数时,JS引擎会执行以下步骤(并不完善,涉及原型):

  1. 创建一个空的this对象(相当于执行 const this = {}
  2. 执行构造函数代码,向this对象添加属性和方法
  3. 隐式返回this对象
ini 复制代码
function Person(name) {
  // 隐式创建:const this = {}
  this.name = name;
  // 隐式返回:return this
}

三、原始类型与包装类

包装类的概念

当对原始值(string/number/boolean)进行属性操作时,JS会自动将其包装为临时对象:

dart 复制代码
const num = 123;  // 原始类型
num.a = 'aaa';    // 隐式创建:new Number(123).a = 'aaa'
delete num.a;     // 删除包装对象的属性
console.log(num.a); // undefined(原始值没有属性)

包装类的特殊行为

包装对象在参与运算时会自动拆箱为原始值:

javascript 复制代码
const numObj = new Number(123);
console.log(numObj + 1); // 124(自动拆箱)
console.log(numObj.a);   // 'aaa'(属性访问)

不可变特性

原始类型无法修改内置属性:

ini 复制代码
const arr = [1, 2, 3];
arr.length = 2;    // 有效:[1, 2]

const str = 'abcd';
str.length = 2;    // 无效(创建临时String对象后丢弃)
console.log(str.length); // 4(原始字符串长度不变)

四、类型判断

typeof操作符

用于判断基本类型,但对null和对象类型的判断有局限性:

javascript 复制代码
console.log(typeof 'hello');     // 'string'
console.log(typeof 123);         // 'number'
console.log(typeof true);        // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof Symbol(1));   // 'symbol'
console.log(typeof 123n);        // 'bigint'
console.log(typeof null);        // 'object'(历史遗留问题)

对象类型检测

typeof不能区分具体对象类型,需使用其他方法:

javascript 复制代码
const obj = {};
const arr = [];
const date = new Date();

console.log(typeof obj);   // 'object'
console.log(typeof arr);   // 'object'
console.log(typeof date);  // 'object'

// 更精确的类型检测
console.log(arr instanceof Array);  // true
console.log(date instanceof Date);  // true
console.log(Object.prototype.toString.call(arr)); // '[object Array]'

总结

概念 说明 示例
对象创建 字面量、Object构造函数、自定义构造函数 const obj = {}/new Object()/new Person()
new机制 创建this对象 → 添加属性 → 返回this function Car(){this.color='red'}
包装类 原始值操作属性时创建临时包装对象 num.propertynew Number(num).property
typeof 识别基本类型(除null) typeof 'str' → 'string'
相关推荐
满分观察网友z10 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z13 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog14 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构19 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙25 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1126 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆30 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er35 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0638 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444041 分钟前
javaweb———html
前端·javascript·html