CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
JavaScript 进阶/课时/对象与原型
RawBlame
课时目录12 节

JavaScript 进阶

  1. 01JS 进阶地图
  2. 02变量与提升
  3. 03运算符与相等
  4. 04控制流深入
  5. 05函数与 this
  6. 06异步深入
  7. 07对象与原型
  8. 08集合与 JSON
  9. 09模块系统
  10. 10内存与 GC
  11. 11调试与异常
  12. 12综合练习

对象与原型

classes、prototypal inheritance、Symbol。

35 分钟

对象与原型

javascript-core 讲过对象字面量;本课深入 原型链、class 语法糖 与 Symbol。理解原型有助于调试 react-essentials 组件继承与 nodejs-essentials 内置类扩展。

学习目标

  • 追踪 obj.method() 的原型链查找过程
  • 使用 class 并理解其原型本质
  • 用 Symbol 定义不会冲突的属性键

原型链

const animal = {
  eat() { return 'eating'; },
};

const dog = Object.create(animal);
dog.bark = () => 'woof';

dog.bark(); // 'woof'
dog.eat();  // 'eating'(沿 [[Prototype]] 找到 animal)
dog.__proto__ === animal;           // true(勿在生产改 __proto__)
Object.getPrototypeOf(dog) === animal; // 推荐 API

查找顺序:自身属性 → 原型 → 原型的原型 → … → null。

构造函数与 new

function Lesson(title) {
  this.title = title;
}
Lesson.prototype.render = function () {
  return `<h1>${this.title}</h1>`;
};

const l = new Lesson('JS 进阶');
l.render(); // '<h1>JS 进阶</h1>'

new 步骤:创建对象 → 绑定 this → 执行构造函数 → 关联原型 → 返回对象。

class 语法

class Track {
  #slug; // 私有字段

  constructor(slug, title) {
    this.#slug = slug;
    this.title = title;
  }

  get slug() {
    return this.#slug;
  }

  static listUrl() {
    return '/api/tracks';
  }
}

class Lesson extends Track {
  constructor(slug, title, order) {
    super(slug, title);
    this.order = order;
  }
}

class 本质是原型继承的语法糖;方法定义在 Track.prototype 上。

Symbol

const ID = Symbol('id');
const user = {
  name: 'Lee',
  [ID]: 42,
};

Object.keys(user);              // ['name'] — Symbol 不可枚举
user[ID];                       // 42

const META = Symbol.for('app.meta');
Symbol.for('app.meta') === META; // true(全局注册表)

库作者用 Symbol 避免与用户属性名冲突;Symbol.iterator 定义可迭代协议。

属性描述符

const obj = {};
Object.defineProperty(obj, 'locked', {
  value: 1,
  writable: false,
  enumerable: false,
  configurable: false,
});

Object.freeze / seal 用于浅层不可变对象。

练习

  • 手写 Object.create 等价实现(设置 [[Prototype]])
  • 用 class 定义 Stack,含 push/pop
  • 用 Symbol 为对象添加「隐藏」元数据,验证 for-in 看不到

小结

JS 基于原型继承;class 是语法糖;Symbol 提供唯一属性键。 下一课集合与 JSON。

加载本节练习…
← 上一课异步深入下一课 →集合与 JSON