JS设计模式-构造器模式

理论概述

在面向对象编程中，构造器是一个当新建对象的内存被分配后，用来初始化该对象的一个特殊函数。在javascript一切皆是对象。 对象构造器是被用来创建特殊类型对象的，首先要准备使用的对象，其次在对象初次创建时，通过接收参数，构造器用来对成员的属性和方法进行赋值。

• 基本的构造器模式

  function Person(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.sayName = function(){
  	console.log(`Hi ${this.name}-${this.age}-${this.sex}`)
    }
  }
  
  var person = new Person("Toney",22,'girl')
  console.log(person)
  person.sayName()
  
  

以上这个简单的版本的构造器模式，有2个问题。一个是难以继承，一个是每个person构造函数创建的对象中，都有一个sayName方法，这很浪费，理想的情况应该是所有Person类型的对象都应该引用同一个函数。 为了sayName方法在实例中共享，我们可以借助prototype

在JS的函数中都有一个prototype的属性，当我们调用构造器创建一个对象是，构造函数的prototype上的属性对于所创建的对象都能看见，参照此特性，我们来改造下原来的例子。

function Person(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}

Person.prototype.sayName = function(){
		console.log(`Hi ${this.name}-${this.age}-${this.sex}`)
}
var person = new Person("Toney",22,'girl')
var person2 = new Person("Json",82,'boy')
console.log(person)
person.sayName()
console.log(person2)

在ES6版本，ES6 支持了类的定义，所以写起来风格更加优雅，代码量也更少

class Person{
	constructor(name,age,sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	sayName(){
		console.log(`Hi ${this.name}-${this.age}-${this.sex}`)
	}
}

var person = new Person("Toney",22,'girl')
var person2 = new Person("Json",82,'boy')
console.log(person)
person.sayName()
console.log(person2)

源码地址：codepen.io/Mister-weiz…