如何在创建另一个对象后阻止原型中覆盖的函数的参数

Question

为了避免复制相同的函数，我听说函数必须在prototype 中定义。而且我听说 OOP 继承很烂，这就是为什么我在深入 Javascript 时尝试使用工厂函数的原因。但是我在下面的代码中有一个问题。我在prototype 中定义了所有函数并创建了两个对象emp 和emp2。但是在定义emp2 之后，emp 的参数会被覆盖。那么工厂函数和原型有什么好处呢？

const eater = (state) => ({
  eat(){
    console.log(state.name, 'is eating')
  }
})



function createEmployee(name, age){
  let Employee = Object.create
    (createEmployee.prototype)
  Employee.name = name 
  Employee.age = age 
  
  Object.assign(
    createEmployee.prototype, 
    eater(Employee)
  )
  
  createEmployee.prototype.work = function(){
    console.log(Employee.name, 'is working')
  } 
 
  
  return Employee
}

let emp = createEmployee('Muzaffer', 24)
emp.work()
emp.eat()
let emp2 = createEmployee('Cuma', 22)
emp.work()
emp.eat()
//Output 
//Muzaffer is working
//Muzaffer is eating
//Cuma is working
//Cuma is eating

Answer 1

使用this 关键字而不使用new 关键字时不起作用。

"use strict";
const eater = () => ({
  eat(){
    console.log(this.name, 'is eating')
  }
})

Object.assign(
  createEmployee.prototype, 
  eater()
)
 

function createEmployee(name, age){
    
  let Employee = Object.create(createEmployee.prototype)
   
  this.name = name 
  this.age = age 
   
  return Object.assign(Employee, this)
}

createEmployee.prototype.work = function(){
  console.log(this.name, 'is working')
} 

let emp = createEmployee('Muzaffer', 24)
console.log(emp.name)
emp.work()
emp.eat()
let emp2 = createEmployee('Cuma', 22)
console.log('after creating emp2')
emp.work()
emp.eat()
console.log(emp.name)

带有new关键字

const eater = () => ({
  eat(){
    console.log(this.name, 'is eating')
  }
})

Object.assign(
  createEmployee.prototype, 
  eater()
)
 

function createEmployee(name, age){
  
  this.name = name 
  this.age = age 
  
}
createEmployee.prototype.work = function(){
  console.log(this.name, 'is working')
} 

let emp = new createEmployee('Muzaffer', 24)
console.log(emp.name)
emp.work()
emp.eat()
let emp2 = new createEmployee('Cuma', 22)
console.log('after creating emp2')
emp.work()
emp.eat()
console.log(emp.name)

根据这些结果：new 关键字只是使this 对象的原型引用createEmployee.prototype，就像之前的Object.create 调用一样。并返回this 对象。当使用 new 关键字调用函数或仅调用常规函数 this 时，对象会自动创建。

但我们不需要在createEmployee 工厂函数中使用this 关键字。我们只需要在我们的对象函数中使用this 关键字，例如work 和eat。

const eater = () => ({
  eat(){
    console.log(this.name, 'is eating')
  }
})

Object.assign(
  createEmployee.prototype, 
  eater()
)
 

function createEmployee(name, age){
    
  let Employee = Object.create(createEmployee.prototype)
   
  Employee.name = name 
  Employee.age = age 
   
  return Employee 
}

createEmployee.prototype.work = function(){
  console.log(this.name, 'is working')
} 

let emp = createEmployee('Muzaffer', 24)
console.log(emp.name)
emp.work()
emp.eat()
let emp2 = createEmployee('Cuma', 22)
console.log('after creating emp2')
emp.work()
emp.eat()
console.log(emp.name)

Answer 2

使用this关键字时有效

const eater = () => ({
  eat(){
    console.log(this.name, 'is eating')
  }
})

Object.assign(
  createEmployee.prototype, 
  eater()
)
 

function createEmployee(name, age){
    
  let Employee = Object.create(createEmployee.prototype)
   
  this.name = name 
  this.age = age 
   
  return Object.assign(Employee, this)
}

createEmployee.prototype.work = function(){
  console.log(this.name, 'is working')
} 

let emp = createEmployee('Muzaffer', 24)
console.log(emp.name)
emp.work()
emp.eat()
let emp2 = createEmployee('Cuma', 22)
console.log('after creating emp2')
emp.work()
emp.eat()
console.log(emp.name)


/*
  
  //Output
 
Muzaffer
Muzaffer is working
Muzaffer is eating
after creating emp2
Muzaffer is working
Muzaffer is eating
Muzaffer
  
  
  
*/