为何需使用prototype？请解析两段JavaScript构造函数代码的差异

嘿，让我来一步步帮你理清这两个问题～

问题1：为何我在此处需要使用prototype？ #

在JavaScript这种基于原型的语言里，prototype是实现高效继承和共享属性/方法的核心，你需要它的原因主要有这几点：

• 内存优化，性能提升：如果把方法定义在构造函数内部（比如function Employee() { this.sayHi = function() {} }），每创建一个实例都会生成一个全新的函数副本，多实例场景下会浪费大量内存。但把方法挂在prototype上后，所有实例都会共享同一个方法引用，内存开销大大降低。
• 实现完整的继承逻辑：如果你的Employee原型上有通用方法或属性（比如Employee.prototype.calculateSalary = function() {}），子类Manager的实例想要访问这些内容，就必须通过设置Manager.prototype继承自Employee.prototype，让实例能顺着原型链找到父类原型的成员。
• 保证类型判断的准确性：正确设置原型链后，instanceof、Object.getPrototypeOf()这类工具才能正常工作。比如没有prototype继承的话，jim instanceof Employee会返回false，但设置后会返回true，这在代码的类型判断和逻辑校验里非常重要。

问题2：两段JavaScript代码的差异 #

先把两段代码摆出来，再拆解核心差异：

两段代码回顾 #

第一段代码：

function Employee() {
  this.name = "serj";
}
function Manager() {
  Employee.call(this);
  this.dept = "general";
}
var jim = new Manager;
console.log(jim.name); //serj

第二段代码：

function Employee() {
  this.name = "serj";
}
Manager.prototype = Object.create(Employee.prototype);
function Manager() {
  Employee.call(this);
  this.dept = "general";
}
var jim = new Manager;
console.log(jim.name); //serj

核心差异分析 #

两段代码都通过Employee.call(this)实现了构造函数继承——把Employee构造函数里的实例属性name复制到了Manager实例上，所以jim.name都能输出serj。但它们的原型链结构完全不同，导致了几个关键差异：

1. 原型链的继承关系不同

   • 第一段代码：jim的原型链是 jim → Manager.prototype → Object.prototype。Manager.prototype是默认生成的空对象（直接继承自Object），和Employee.prototype没有任何关联。
   • 第二段代码：Manager.prototype = Object.create(Employee.prototype)把Manager的原型设置为一个继承自Employee.prototype的对象，所以jim的原型链是 jim → Manager.prototype → Employee.prototype → Object.prototype。

2. 能否访问父类原型上的成员
   假设我们给Employee.prototype添加一个通用方法：

   Employee.prototype.sayHello = function() {
     console.log(`Hi, I'm ${this.name}`);
   }
   

   • 第一段代码里，调用jim.sayHello()会直接报错：sayHello is not a function，因为jim的原型链上找不到这个方法。
   • 第二段代码里，jim.sayHello()能正常执行，输出Hi, I'm serj，因为原型链能顺利找到Employee.prototype上的方法。

3. instanceof操作符的结果不同

   • 第一段代码：jim instanceof Employee返回false，因为jim的原型链里根本没有Employee.prototype的影子。
   • 第二段代码：jim instanceof Employee返回true，完全符合“Manager是Employee的子类”的逻辑预期。

4. 构造函数的指向差异（补充细节）
   第二段代码还有个小坑：设置Manager.prototype = Object.create(Employee.prototype)后，Manager.prototype.constructor会默认指向Employee而不是Manager。如果需要修正这个指向，通常会额外加一行：

   Manager.prototype.constructor = Manager;
   

   这样jim.constructor才会正确指向Manager构造函数；而第一段代码里，jim.constructor默认就是Manager，不需要额外处理。

内容的提问来源于stack exchange，提问作者RTX