我写了三年 React,结果面试官让我手写 new?这不是搞我心态?

写React三年,遇到手写 new,就像让厨师现场炼铁造锅。
在 JavaScript 中,new 关键字扮演着非常重要的角色,它是构造函数与实例对象之间的桥梁,常用于创建对象的实例。
那么 new 到底做了什么?如果不使用 new,会发生什么变化?我们又该如何手动实现它的机制?本文将带你一步步深入了解。


一、new 到底做了哪些事?

当你使用 new 调用一个构造函数时,实际上发生了以下几步操作:

  1. 创建一个空对象 ,并将该对象的 __proto__ 指向构造函数的 prototype
  2. 将构造函数内部的 this 绑定到这个新创建的对象上
  3. 执行构造函数的代码(即给这个对象添加属性、方法等)。
  4. 判断构造函数的返回值
    • 如果构造函数显式返回的是一个对象类型 (如 ObjectArrayFunction 等),那么这个返回的对象会成为 new 表达式的结果。
    • 如果没有返回值,或者返回的是一个非对象类型(如字符串、数字、布尔值),则返回第一步中创建的新对象。

示例:

js 复制代码
function Person() {
  this.name = 'Jack';
}
const p = new Person();
console.log(p.name); // Jack

二、如果不使用 new 会怎样?

我们来改写上面的代码,去掉 new

js 复制代码
function Person() {
  this.name = 'Jack';
}
const p = Person(); // 没有用 new
console.log(p);     // undefined
console.log(name);  // Jack(污染了全局作用域)

解释:

  • this 被绑定到全局对象(非严格模式下),name 成为了全局变量。
  • 函数没有返回值,pundefined

三、构造函数中有返回值的特殊情况

返回一个对象:

js 复制代码
function Person() {
  this.name = 'Jack';
  return { age: 18 };
}
const p = new Person();
console.log(p);       // { age: 18 }
console.log(p.name);  // undefined

如果构造函数返回一个对象类型,new 会直接返回该对象。

返回基本类型:

js 复制代码
function Person() {
  this.name = 'Jack';
  return 'Tom';
}
const p = new Person();
console.log(p);       // { name: 'Jack' }
console.log(p.name);  // Jack

如果返回值不是对象(如字符串),则忽略,仍然返回新创建的实例。


四、手写 new 的实现

下面是手写版 new 函数的实现:

js 复制代码
function create(fn, ...args) {
  if (typeof fn !== 'function') {
    throw new Error('fn must be a function');
  }

  // 1. 创建一个新对象,并链接原型
  const obj = Object.create(fn.prototype);

  // 2. 执行构造函数,将 this 指向新对象
  const result = fn.apply(obj, args);

  // 3. 判断返回值
  return result instanceof Object ? result : obj;
}

使用示例:

js 复制代码
function Person(name) {
  this.name = name;
  return { age: 18 };
}

const p1 = new Person('Lucas');
const p2 = create(Person, 'Lucas');

console.log(p1); // { age: 18 }
console.log(p2); // { age: 18 }

五、总结

  • new 关键字执行时会完成四步:创建对象绑定原型绑定 this 并执行函数根据返回值决定返回结果
  • ✅ 如果构造函数显式返回对象,则该对象会覆盖原本实例。
  • ✅ 如果不使用 new,构造函数中的 this 会指向全局对象(非严格模式)。
  • ✅ 我们可以使用 Object.create + apply 模拟 new 的行为。

📌 面试小技巧

面试官问你 "new 关键字干了什么?" 你可以说:

"new 创建了一个对象,并把构造函数的原型赋值给这个对象的 __proto__,然后用构造函数执行并绑定 this,最后根据返回值来判断是返回这个新对象还是构造函数中返回的对象。"


如果觉得有帮助,欢迎点赞、收藏、评论支持一下 🙌

相关推荐
zwjapple33 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞5 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作