js设计模式

日常常用的设计模式有很多，并且可以搭配使用，以提高代码的质量‘低耦合，高内聚’

1. 单例模式

• 对象数据类型的作用：

把描述同一个事物（同一个对象）的属性和方法放在同一个内存空间下，起到分组作用，这样不用的事物之间的属性即使属性相同，互相也不会发生冲突。

• 单例模式其实就是创建一个对象

var peson1={
  name:'aaa',
  age:22
}
var person2={
  name:'bbb',
  age:22
}
person1和person2即使有相同的属性名，相同的属性也不会互相干扰

• 使用单例模式可以实现 ‘模块化开发’

• 单例模式下不同对象之间的相互调用

1.在自己的命名空间下调用其他命名空间下的方法
  命名空间 . 属性名（）
2.在自己的命名空间下调用自己的方法。
  this.属性名（）；

项目中常用的单例模式开发（模块化开发的一种方式）

• 利用闭包的两个作用，可以变通地读到内部的变量，二是可以让这些变量始终在内存中。

var fn=(function(){
  let a = function(){xxx};
  let b = xxx;
  let c = function(){xxx};
  return {
    init:function(){
      a();
      c();
    }
  }
})()
fn.init()//执行里边所有代码

2. 工厂模式

• 工厂模式类似于创造单例模式的函数。

工厂模式：

把实现同一件事情的代码放在一个函数中，以后再想实现这个功能，不需要重新写这个代码，只要执行这个函数即可。

• 其实工厂模式就是函数的封装

低耦合高内聚，减少页面中的冗余代码，提高代码的重复利用率。

function craetPerson(name,age){
  var obj={};
  obj.name=name;
  obj.age=age;
  return obj;
}
var person3=craetPerson('three',23)

3. 构造函数模式

• 对象---万物皆对象
• 类 -----对象的具体细分
• 实例---类中的一个具体事物

构造函数模式的目的就是为了创建一个自定义的类，并且创建这个类的实例

• 在js中所有的类都是函数数据类型（Function）的，他通过new变成一个实例
• js中所有的实例都是对象数据类型（Object）的

• 构造函数模式和工厂模式的区别

1.在执行的时候

普通的工厂模式-->creatPerson（）；
构造函数模式-->new CreatPerson（）；//类名首字母大写
js内置的类无论是new出来的还是字面量方式 都是类的实例

2.在函数中代码执行的时候

相同：形成一个私有作用域->形参赋值->预解释->代码从上到下执行
不同：

1. 在代码执行之前，构造函数不用手动创建对象，浏览器会默认的创建一个对象的数据类型的值（这个对象其实就是我们当前类的一个实例）
2. 接下来代码从上向下执行，以当前的实例为执行的主体（this代表当前的实例），然后分别把属性名和属性值给当前的实例。
3. 浏览器会默认的把创建的实例返回不用return 。
   （在构造函数中如果有返回值，返回一个基本数据类型的值，没影响。如果返回一个引用数据类型的值，那么当前的实例会被替换）

function CreatPerson(name,age){
  this.name=name;
  this.age=age;
  this.sayName=function(){
    console.log(this.name);
  }
}
var p1=new CreatPerson('ccc',25);
var p2=new CreatPerson('ccc',25);
p1.sayName()   //ccc
p2.sayName()   //ccc

• 注意

p1和p2都是这个类的实例，所以都有sayName这个方法，但是不同的实例的方法是不一样的
p1.sayName===p2.sayName   //false;
* 在类中给实例增加属性（this.xxx=xxx）属于当前实例的私有属性，实例和实例之间是不同的个体，所有的私有属性之间是不相等的

类也有普通函数的一面  当作为普通函数时和实例没有任何关系
如果当做普通函数执行（没有new）那么只是当做普通函数执行，函数中this会指向window，没有返回值接收的是undefined

• 检测一个实例时候属于这个类

console.log(p1 instanceof CreatPerson)   //true
console.log(p1 instanceof Object)   //true

in   检测一个属性是否属于这个对象 不管是私有还是共有属性都可以检测到（除非该属性设置了<不可枚举>）
hasOwnProperty     p1.hasOwnProperty('name')只能检测对象的私有属性
检测一个对象的共有属性
function hasPubProperty(obj,attr){
  return(attr in obj)&& !obj.hasOwnProperty(attr)
}

4. 原型模式

• 基于构造函数的原型模式解决了属性和方法公有的问题
  把实例之间相同的属性和方法提取成共有的属性和方法-------想让谁成为公有的属性和方法就放到类的prototype上即可

function Fn(name){
  this.name=name
}
Fn.prototype.sayName=function(){//创建公有属性
  console.log(name)
}

• 规定

1. 每个函数数据类型（普通函数和类）都有一个天生自带的属性：prototype（原型）并且这个属性是对象数据类型的值
2. 并且prototype上浏览器天生给他加了一个属性constructor（构造函数），属性的值是当前函数（类）本身
3. 每个对象数据类型 （普通对象，实例，prototype...）也天生自带一个属性（__proto__）属性值是当前实例所属类的原型
4. Object是js所有数据类型的基类Object.prototype上没有proto`这个属性
5. Fn1 instanceof Object -->true因为Fn1通过__proto__可以向上查找 不管有多少级都可以找到Object---------------------- *** （原型链查找）***

Fn.prototype.constructor===Fn;    //true
var Fn1=new Fn();
Fn1.__proto__=Fn.prototype;    //true

原型链.jpg

• 原型链查找过程
  先查自己的私有属性 ----> 没有的话 ----> 再查自己的公有属性 ----> 再没有的话 ----> 通过原型上的__proto__继续向上查找 ----> 直到找到为止 ----> 实在没有就是undefined
• 批量设置公有属性和方法
  1.起别名

function Fn(){
  this.x=100;
}
var pro=Fn.prototype;
pro.getX=function(){
  
}
pro.getY=function(){

}

2.重构原型对象
Fn.prototype是内置的属性一直存在

Fn.prototype={
  constructor:Fn,//需要手动添加constructor:属性
  getX:function(){
    ...
  }
}
这种方式会重新开辟公有属性和方法，覆盖之前类的原型

替换prototype.jpg

5.装饰器模式

http://es6.ruanyifeng.com/#docs/decorator
后续补充详细说明