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

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

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

一、对象的创建方式

1. 对象字面量（直接量）

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

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

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

2. 使用Object构造函数

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

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

3. 自定义构造函数

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

// 自定义构造函数
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操作符

构造函数的作用

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

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对象

function Person(name) {
  // 隐式创建：const this = {}
  this.name = name;
  // 隐式返回：return this
}

三、原始类型与包装类

包装类的概念

当对原始值（string/number/boolean）进行属性操作时，JS会自动将其包装为临时对象：

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

包装类的特殊行为

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

const numObj = new Number(123);
console.log(numObj + 1); // 124（自动拆箱）
console.log(numObj.a);   // 'aaa'（属性访问）

不可变特性

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

const arr = [1, 2, 3];
arr.length = 2;    // 有效：[1, 2]

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

四、类型判断

typeof操作符

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

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不能区分具体对象类型，需使用其他方法：

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.property → new Number(num).property
typeof	识别基本类型（除null）	typeof 'str' → 'string'