JavaScrip设计模式（二）——构造器模式和原型模式

---

1.构造器模式

// 以录入学生系统为例子

// 不使用设计模式的写法
let students1 = {
  name: '张三',
  age: 18
}
let students2 = {
  name: '李四',
  age: 19
}
console.log(students1, students2);


// 构造器模式
function Students(name, age){
  this.name= name;
  this.age = age;
}
let s1 = new Students('张三', 18);
let s2 = new Students('李四', 19);
console.log(s1, s2);

2. 原型模式

// 以录入学生系统为例子

// 不使用设计模式的写法
let students1 = {
  name: '张三',
  age: 18
}
let students2 = {
  name: '李四',
  age: 19
}
console.log(students1, students2);

// 原型模式
function Students(name, age){
  this.name= name;
  this.age = age;
}
Students.prototype.sayHi = function(){
    console.log('我是' +this.name +'，今年'+ this.age+'岁了。');
}
let s1 = new Students('张三', 18);
let s2 = new Students('李四', 19);
console.log(s1, s2);
s1.sayHi();
s2.sayHi();

补充：在es6出来后，使用类的方式会比使用原型更加的简便。如下代码，效果是一样的。

// 使用类的写法
class Student{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sayHi(){
    console.log('我是' +this.name +'，今年'+ this.age+'岁了。');
  }
}
let s1 = new Student('张三', 18);
let s2 = new Student('李四', 19);
s1.sayHi(); // 我是张三，今年18岁了。
s2.sayHi(); // 我是李四，今年19岁了。

如上所示：
最原始的比较冗余。
构造器里面的方法其实是重复在内存空间生成新的方法，会导致内存的消耗。
原型的添加了很多变量，会导致变量的全局污染。
类不仅解决了上述问题，同时利于其他语言对js的理解。

总结

构造器里面生成的方法是不同的，所以会导致内存的消耗，
原型中添加的方法会导致全局污染，
相对来讲，这两种设计模式都有一定的弊端，因此，目前常用的是类生成方法。