构造器模式
如果我们系统中有多个员工,创建每一个员工都需要 new 一下,出现很多重复代码,所以我们可以将他们写成一个构造函数,然后通过传入的不同参数创建不同的员工。
js
function Employee(name, age) {
this.name = name
this.age = age
this.toString = function() {
return `name: ${this.name}, age: ${this.age}`
}
}
const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1);
//=>(index.js:7) employee1 Employee { name: '张三', age: 18, toString: [Function (anonymous)] }
原型模式
以上代码中toString 方法,每次 new 一个对象都需要重新创建一个,而这个方法却是每一个 Employee 共有的,所以能不能把这个方法提取到一个公共的地方捏?
此时就需要我们使用原型模式,将 toString 方法挂载到 Employee 的原型上。
js
function Employee(name, age) {
this.name = name
this.age = age
}
Employee.prototype.toString = function () {
return `name: ${this.name}, age: ${this.age}`
}
const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1);
//=>(index.js:7) employee1 Employee { name: '张三', age: 18 }
console.log(employee1.toString())
// name: 张三, age: 18
那假如我们使用 ES6 写法呢?
js
class Employee {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return `name: ${this.name}, age: ${this.age}`
}
}
const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1);
//=>(index.js:7) employee1 Employee { name: '张三', age: 18 }
console.log(employee1.toString())
// name: 张三, age: 18
很神奇!toString 直接被挂载到原型上!
所以说,es6 类的写法同时兼顾了构造器模式和原型模式。
应用场景有比如组件的复用,状态管理等。