第三次预习

 一、对象 (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 对象、函数和数字的核心知识与高级技巧,建议结合具体项目实践加深理解。如需某个知识点的进一步展开,可以告诉我具体方向!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值