死磕这几道js手写题

小贤哥2026-03-10 10:07

1. 如何在JS中实现继承（用尽可能多的方式）？

  1. 原型链继承
ini 复制代码 
function Parent() {
  this.name = "parent";
  this.like = ["play", "run"];
}
Parent.prototype.doSomething = function () {
  console.log("do something");
};
function Child() {
  this.name = "child";
}
Child.prototype = new Parent();
console.log(Child.prototype.constructor); // [Function: Parent]
/**
 *  当你用构造函数创建对象时（比如 function Child() {}），
 *  JavaScript 会默认给 Child 生成一个 prototype 对象，
 *  这个对象自带 constructor 属性，
 *  指向构造函数本身（即 Child.prototype.constructor === Child 为 true）。
    因为 Child.prototype 被整个替换成了 Parent 的实例，原本指向 Child 的 constructor 就丢失了，
    转而指向 Parent------ 这不符合逻辑（Child 的实例的构造器应该是 Child 本身）。
 */
Child.prototype.constructor = Child; 
console.log(Child.prototype.constructor); // [Function: Child]
const child = new Child();
const child2 = new Child();
child.like.push("jump");
console.log(child.like); // [ 'play', 'run', 'jump' ]
console.log(child2.like); // [ 'play', 'run', 'jump' ]

关键解析：

主要通过将子类的原型 （prototype）指向父类的实例来实现。

优点是实现简单：

缺点：

  1. 引用类型属性共享，导致实例间相互影响；

  2. 无法在创建子类实例时灵活向父类构造函数传参，扩展性差；

  3. 会导致子类 constructor 指向异常，需要手动修复。

2. 构造函数继承

ini 复制代码 
function Parent() {
  this.type = "parent";
  this.like = ["play", "run"];
}
Parent.prototype.doSomething = function () {
  console.log("do something");
};
function Child(name) {
  Parent.call(this);
  this.name = name;
  this.age = 18;
}
const child = new Child("child");
console.log(child.type); // parent
// child.doSomething(); // child.doSomething is not a function
child.like.push("jump");
console.log(child.like); // [ 'play', 'run', 'jump' ]
const child2 = new Child("child2");
console.log(child2.like); // [ 'play', 'run' ]

关键解析：

构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现的。 这样，子类的实例就可以继承父类的属性。

优点是每个实例都有自己的属性，不会共享父类的属性，但不能继承父类的原型方法。

  1. 组合继承
ini 复制代码 
function Parent() {
  this.type = "parent";
  this.like = ["play", "run"];
}
Parent.prototype.doSomething = function () {
  console.log("do something");
};
function Child(name) {
  Parent.call(this); // 被调用一次
  this.name = name;
  this.age = 18;
}
Child.prototype = new Parent(); // 被调用一次
Child.prototype.constructor = Child;

const child = new Child("child");
const child2 = new Child("child2");
child.like.push("jump");
console.log(child.like); // [ 'play', 'run', 'jump' ]
console.log(child2.like); // [ 'play', 'run' ]
child.doSomething(); // do something

关键解析：

组合继承结合了原型链继承和构造函数继承的优点。

它通过调用父类构造函数继承属性，通过将子类的原型指向父类的实例继承方法。

4. 寄生组合继承

ini 复制代码 
function Parent() {
  this.type = "parent";
  this.like = ["play", "run"];
  console.log("parent 被调用", this);
}
Parent.prototype.doSomething = function () {
  console.log("do something");
};
function Child(name) {
  Parent.call(this);
  this.name = name;
  this.age = 18;
}
Child.prototype = Object.create(Parent.prototype); // 被调用一次
Child.prototype.constructor = Child;

const child = new Child("child");
child.doSomething(); // do something
child.like.push("jump");
console.log(child.like); // [ 'play', 'run', 'jump' ]

关键解析：

寄生组合继承是对组合继承的一种优化。

它避免了组合继承中父类构造函数被调用两次的问题。

是目前使用最多、最推荐的方法。

5. ES6 class 语法

scala 复制代码 
class Parent {
    constructor() {
        this.type = "parent";
        this.like = ["play", "run"];
    }
    doSomething() {
        console.log("do something");
    }
}

class Child extends Parent {
    constructor(name) {
        super();
        this.name = name;
        this.age = 18;
    }
}

const child = new Child("child");

child.like.push("jump");
console.log(child.like); // [ 'play', 'run', 'jump' ]
child.doSomething(); // do something

关键解析：

ES6 引入了 class 语法更加简洁语法糖，使得继承更容易读写，而且天然支持组合继承。

比传统的原型继承和组合继承方法更直观，有利于代码维护和理解。

拓展知识

原型链是 js 实现继承的基础。每个对象都有一个原型对象，通过原型对象可以访问到父类的属性和方法。原型链的终点是 Object.prototype, 它的原型是null。

构造函数是用于创建对象的特殊函数，通过 new 关键字调用，可以创建一个新的对象实例，并将构造函数中的 this 绑定到新创建的对象上。

class 对原型链和构造函数的语法糖，使得继承变得更加简洁和直观。通过 extends 关键字可以实现继承，通过 super 关键字可以调用父类的构造函数和方法。

2. 如何使用 JS 实现发布订阅模式？

javascript 复制代码 
class eventBus {
  constructor() {
    this.eventCenter = [];
  }
  on(event, listener) {
    if (!this.eventCenter[event]) {
      this.eventCenter[event] = [];
    }
    this.eventCenter[event].push(listener);
  }
  emit(event, ...args) {
    if (!this.eventCenter[event]) {
      return;
    }
    this.eventCenter[event].forEach((listener) => {
      listener(...args);
    });
  }
  off(event, listener) {
    if (!this.eventCenter[event]) {
      return;
    }
    this.eventCenter[event] = this.eventCenter[event].filter(
      (item) => item !== listener,
    );
  }
}

// 定于回调函数
const user1 = (message) => {
  console.log("user1 收到消息：", message);
};
const user2 = (message, aaa) => {
  console.log("user2 收到消息：", message, aaa);
};

const eventBus1 = new eventBus();
eventBus1.on("message", user1);
eventBus1.on("message", user2);

eventBus1.emit("message", "hello world", "hahahah");

eventBus1.off("message", user2);
eventBus1.emit("message", "hello world111", "111");

关键解析：

发布订阅模式是一种代码的设计模式，它允许对象间进行松散耦合的通信。

发布者不会直接调用订阅者，相反，它们通过时间通道发布消息；

订阅者通过注册监听事件通道上的消息来做出响应。

这种模式在事件驱动编程和异步编程中非常有用。

要实现发布订阅模式，需要以下几个关键功能：

  1. 一个用于存储事件及其对应回调的事件中心。

  2. 一个 on 方法，用于订阅某个事件，并将回调函数注册到事件中心中。

  3. 一个 emit 方法， 用于发布某个事件，并调用所有订阅该事件的回调函数。

  4. 一个 off 方法，用于解除订阅

扩展知识：

应用场景： 聊天室

假如我们要实现一个简单的聊天室应用，当某个用户发送消息时，所有在线用户都能接受到消息。

javascript 复制代码 
class ChatRoom {
  constructor() {
    this.eventEmitter = { events: {} };
  }
  on(event, listener) {
    if(!this.eventEmitter.events[event] ) {
      this.eventEmitter.events[event] = [];
    }
    this.eventEmitter.events[event].push(listener);
  }
  emit(event, ...args) {
    if(!this.eventEmitter.events[event]) {
        return;
    }
    this.eventEmitter.events[event].forEach((listener) => listener(...args));
  }
  off(event, listener) {
    if(!this.eventEmitter.events[event]) {
        return;
    }
    this.eventEmitter.events[event] = this.eventEmitter.events[event].filter((item) => item !== listener);
  }
  join(user) {
    this.on('message', user.receiveMessage.bind(user));
  }
  sendMessage(message) {
    this.emit('message', message);
  }
}

class User {
  constructor(name) {
    this.name = name;
  }
  receiveMessage(message) {
    console.log(`${this.name} 收到消息: ${message}`);
  }
}


const chatRoom = new ChatRoom();
const user1 = new User('user1');
const user2 = new User('user2');

chatRoom.join(user1);
chatRoom.join(user2);

chatRoom.sendMessage('hello');
  1. 如何使用 JS 实现斐波那契数列？
bash 复制代码 
// 递归实现function fibonacci(n) {  if (n === 0) return 0;  if (n === 1) return 1;  return fibonacci(n - 1) + fibonacci(n - 2);}// 递归实现方式简单直观，但性能较差，重复计算//迭代function fi(n) {  if (n === 0) return 0;  if (n === 1) return 1;  let a = 0;  let b = 1;  let temp;  for (let i = 2; i <= n; i++) {    temp = a + b;    a = b;    b = temp;  }  return b;}console.log('1')fibonacci(1);console.log('2')console.log(fi(21)); // 10946

关键解析：

斐波那契数列 是一个经典的数学问题，其中每个数都是前两个数的和。

数列以 0 和 1 开始 ，例如：0, 1, 1, 2, 3, 5, 8, 13, 21, ...

后续每一个数都是它前两个数之和。

其定义可以用递归公式表示为：

f(0) = 0

f(1) = 1

f(n) = f(n-1) + f(n-2) n >2 且 n 是自然数

在 js 中我们可以用包括递归、迭代、动态规划等方式进行实现。

在这道题中，我们将分别探讨递归和迭代的实现方式，并最终给出在实际开发性能优化的迭代解决方案。

相关推荐
Lee川1 小时前
🌐 深入 Chrome 浏览器：从单线程到多进程架构的进化之路
前端·架构·前端框架
学以智用1 小时前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字1 小时前
AI 开发必懂：Context Window（上下文窗口）到底是什么？
前端·人工智能·后端
Mr_Swilder1 小时前
intel显卡本地部署大模型
前端
yuki_uix1 小时前
Promise 与 async/await：从回调地狱到优雅异步的演进之路
前端·javascript
over6972 小时前
📸《拍照记单词》—— 从零到上线的完整开发指南（超详细版）
前端·人工智能·产品
毛骗导演2 小时前
万字解析 OpenClaw 源码架构-架构概览
前端·架构
天才熊猫君2 小时前
Flex布局深度解析：为什么我的Flex项目不按预期收缩？
前端
风雪心2 小时前
Antd组件库Form的onValuesChange和getFieldsValue的调用时机分析
前端
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录04本地部署 OpenClaw + DeepSeek-R1 完全指南05Window 10部署openclaw报错node.exe : npm error code 12806OpenClaw 接入 QQ Bot 完整实践指南07npm-error code 128问题解决方法08OpenClaw + 飞书（Feishu）环境搭建指南09OpenClaw 飞书机器人不回复消息？3 小时踩坑总结10OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧