对象与构造函数
约 479 字大约 2 分钟
2026-02-26
对象可以理解为“键值对容器 + 行为集合”。在 JavaScript 里，几乎所有复杂数据都建立在对象之上。
对象的创建方式
字面量
const user = {
name: 'Tom',
age: 18,
}Object 构造器
const user = new Object()
user.name = 'Tom'
user.age = 18自定义构造函数
function User(name, age) {
this.name = name
this.age = age
}
const user = new User('Tom', 18)属性访问：. 与 []
| 写法 | 适用场景 |
|---|---|
obj.key | 属性名固定、符合标识符规范 |
obj[key] | 属性名动态、包含特殊字符、数字开头 |
const obj = {
name: 'Tom',
'user-role': 'admin',
123: 'hello',
}
const k = 'name'
console.log(obj[k]) // Tom
console.log(obj['user-role']) // admin
console.log(obj[123]) // hello对象属性的增删改查
const user = {}
// 增
user.name = 'Tom'
// 改
user.name = 'Jerry'
// 查
console.log(user.name) // Jerry
console.log(user.age) // undefined（不存在的属性不会报错）
// 删
delete user.name构造函数 + new 的执行过程
new Fn() 发生了 4 件事：
- 创建一个新对象（空对象）
- 让该对象的原型指向
Fn.prototype - 用该对象作为
this执行构造函数 - 返回该对象（除非显式返回引用类型）
function Car(color, brand) {
this.color = color
this.brand = brand
}
const car = new Car('blue', 'BYD')
console.log(car) // { color: 'blue', brand: 'BYD' }构造函数返回值规则
显式 return | new 表达式最终结果 |
|---|---|
不写 return | 返回新创建的实例对象 |
return 原始值 | 仍返回实例对象 |
return 引用值 | 返回该引用值（覆盖实例） |
function A() {
this.x = 1
return 100
}
function B() {
this.x = 1
return { y: 2 }
}
console.log(new A()) // { x: 1 }
console.log(new B()) // { y: 2 }手写一个简版 new
function myNew(Ctor, ...args) {
// 1. 创建对象并挂上原型
const obj = Object.create(Ctor.prototype)
// 2. 执行构造函数
const ret = Ctor.apply(obj, args)
// 3. 按 new 规则决定返回值
const isRef = ret !== null && (typeof ret === 'object' || typeof ret === 'function')
return isRef ? ret : obj
}
function Person(name) {
this.name = name
}
const p = myNew(Person, 'Alice')
console.log(p.name) // Alice