一、对象 (Object) 深度解析
1. 对象创建方式对比
| 字面量 | const obj = { key: 'value' }` | 最简洁 | 简单对象、一次性对象 |
| 构造函数 | `const obj = new Object()` | 显式创建 | 需要动态属性时 |
| Object.create() | `const child = Object.create(parent)` | 指定原型 | 继承场景 |
| 类语法 | `class MyClass { ... }` | ES6标准 | 面向对象编程 |
2. 属性描述符详解
javascript
const obj = {};
Object.defineProperty(obj, 'readOnlyProp', {
value: 42,
writable: false, // 不可修改
enumerable: true, // 可枚举
configurable: false // 不可删除
});
console.log(obj.readOnlyProp); // 42
obj.readOnlyProp = 100; // 严格模式报错
3. 原型链机制
// 原型继承示例
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise`);
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const d = new Dog('Buddy');
d.speak(); // "Buddy makes a noise"
4. 对象遍历方法对比
const person = { name: 'Alice', age: 30 };
// 1. for...in (包含原型链属性)
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(key); // name, age
}
}
// 2. Object.keys()
console.log(Object.keys(person)); // ["name", "age"]
// 3. Object.entries()
Object.entries(person).forEach(([key, val]) => {
console.log(`${key}: ${val}`);
});
```
二、函数 (Function) 深度解析
1. 函数创建方式对比
| 类型 | 示例 | 特点 | 提升 | this 绑定 |
| 函数声明 | function fn() {}| 完整功能 | 是 | 动态绑定 |
| 函数表达式 | const fn = function() {} | 灵活赋值 | 否 | 动态绑定 |
| 箭头函数 | const fn = () => {}` | 简洁语法 | 否 | 词法绑定 | 2. 闭包高级应用
// 模块模式
const person = { name: 'Alice', age: 30 };
// 1. for...in (包含原型链属性)
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(key); // name, age
}
}
// 2. Object.keys()
console.log(Object.keys(person)); // ["name", "age"]
// 3. Object.entries()
Object.entries(person).forEach(([key, val]) => {
console.log(`${key}: ${val}`);
});
```
3. this 绑定全解析
const obj = {
name: 'Obj1',
regularFunc: function() {
console.log(this.name);
},
arrowFunc: () => {
console.log(this.name); // 指向外层this
}
};
const obj2 = { name: 'Obj2' };
// 绑定方式对比
obj.regularFunc(); // "Obj1"
obj.regularFunc.call(obj2); // "Obj2"
obj.arrowFunc(); // "" (假设外层this为window)
```
---
以上内容涵盖了 JavaScript 对象、函数和数字的核心知识与高级技巧,建议结合具体项目实践加深理解。如需某个知识点的进一步展开,可以告诉我具体方向!