JS15---js中的模式

一.工厂模式

实例化对象 返回对象

优点：解决创建多个对象的问题

缺点：所创建的对象类型都一致，没办法区分对象的类型

直接传参

  function factory(name1,sex1,age1){
        var obj=new Object();  //实例化对象
        obj.name=name1;
        obj.sex=sex1;
        obj.age=age1;
        return obj;     //返回对象
    }
    var fact=factory("雨宝","女",18);
    var fact1=factory("正正","男",20);
    console.log(fact);//{name: "雨宝", sex: "女", age: 18}
    console.log(fact1);//{name: "正正", sex: "男", age: 20}     //输出都是object类型

利用arguments

 function factory(){
        console.log(arguments);
        var obj=new Object();
        obj.name=arguments[0];
        obj.sex=arguments[1];
        obj.age=arguments[2];
        return obj;
    }
    var fact=factory("雨宝","女",18);

二.构造函数模式

直接在函数上this点写对象 函数外new实例化对象

构造函数一般在实例化的时候执行

缺点：实例化对象，相当于在new的时候重新声明（每次新定义，都要重新跑一遍）

优点：可以区分类别

constructor: ƒ Creative() 构造模式里边都会有constructor

function creative(){
    this.name=arguments[0];
    this.age=arguments[1];
    this.sex=arguments[2];
    this.eat=function(){
       return "this.name"+"啥都吃";
    }
    console.log(this);
    //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    //未被实例化之前指代windows对象，实例化之后指代当前对象
}
creative();   

new实例化之后

function Creative(){
        this.name=arguments[0];
        this.age=arguments[1];
        this.sex=arguments[2];
        this.eat=function(){
           return "this.name"+"啥都吃";
        }
    }
    var creat=new Creative("雨雨",18,"女");
    var creat1=new Creative("正正",20,"男");
    console.log(creat,creat1);  
    //Creative {name: "雨雨", age: 18, sex: "女", eat: ƒ} Creative {name: "正正", age: 20, sex: "男", eat: ƒ}

三.原型模式 prototype原型

建立在构造函数的基础上

原型本身数据互通，原型中所有的值都是一样的。要是值是动态的用构造模式

constructor: ƒ animal() 构造函数

__proto__原型链

优点：让所有对象实例共享它所包含的属性及其方法

①第一种写法
先写一个函数，再animal.prototype.name，第三步实例化对象 var cat=new animal();

function animal(){

}
animal.prototype.name="小花";     //属性
animal.prototype.age="2";
animal.prototype.sex="女孩子";
animal.prototype.eat=function(){  //方法
    return this.name+"吃好吃的！";
}
var cat=new animal();
console.log(cat);
//animal {}
__proto__:
age: "2"
eat: ƒ ()
name: "小花"
sex: "女孩子"
constructor: ƒ animal()
__proto__: Object

若不写中间的name，eat，sex。比较两个输出的差别

function animal(){
    
 }
 var cat=new animal();
 console.log(cat);
 //animal {}
 __proto__:             //这俩中间多了一大堆
 constructor: ƒ animal()
 __proto__: Object

② 第二种写法
这种写法会少 constructor: ƒ animal()

animal.prototype={
    name:"小花",
    sex:"女孩纸",
    age:18,
    eat:function(){
        return this.name+"啥都吃！";
    }
}
var cat=new animal();
console.log(cat);
//animal {}
__proto__:
age: 18
eat: ƒ ()
name: "小花"
sex: "女孩纸"
__proto__: Object

加一个 constructor:animal,

    animal.prototype={
        constructor:animal,
        name:"小花",
        sex:"女孩纸",
        age:18,
        eat:function(){
            return this.name+"啥都吃！";
        }
    }
    var cat=new animal();
    var mouse=new animal();
    console.log(cat);
    console.log(cat.name,mouse.name);//小花   小花    所有对象实例共享它的属性
//animal {}
__proto__:
age: 18
constructor: ƒ animal()
eat: ƒ ()
name: "小花"
sex: "女孩纸"
__proto__: Object

③原型模式是否可以构造函数传值？
传参去修改不同实例化对象的name值，结果报错 name1无法识别

结论：原型模式不可以传递参数

新问题：原型模式不可以通过传参去动态修改某个属性的值，那若想动态修改原型模式的值，我们该用什么方法？

   function animal(name1){   
    }
    animal.prototype={
        constructor:animal,
        name:name1,
        sex:"女孩纸",
        age:18,
        eat:function(){
            return this.name+"啥都吃！";
        }
    }
    var cat=new animal("小花");
    var mouse=new animal("小宝");
    console.log(cat.name,mouse.name);  // 会报错  name1 is not defined

四.原型＋构造模式

可以动态修改原型模式中的属性

其中的eat和info是通用的，我们可以用原型模式写，去实现属性的共享
像name，age，type这些时不同的，我们可以用构造模式去动态修改这些属性

   function animal(){   
       this.name=arguments[0];
       this.age=arguments[1];
       this.type=arguments[2];
       this.eat=function(){
      		 return this.name+"会吃饭！"
       }
    }
    animal.prototype={
        constructor:animal,
        eat:function(){
            return this.name+"啥都吃！";
        },
        info:function(){
            return this.name+"属于:"+this.type+",性别:"+this.sex;
        }
    }
    var cat=new animal("小花",18,"猫");
    var mouse=new animal("小宝",20,"老鼠");
    console.log(cat,mouse); 
//animal {name: "小花", age: 18, type: "猫"}
age: 18
eat: ƒ ()
name: "小花"
type: "猫"
__proto__:
constructor: ƒ animal()
eat: ƒ ()
info: ƒ ()
__proto__: Object
animal {name: "小宝", age: 20, type: "老鼠"}

五.动态原型模式

动态原型模式是由构造模式和原型模式组合而成

动态原型模式就是把共享的使用原型，不共享的使用构造函数

可以通过相关属性动态添加原型

function People(){
    this.name="磊磊";
    this.sex="女";
    this.age="20";
    this.sleep="睡觉";
    //检测
    if(this.sleep=="睡觉"){   // if(typeof this.sleep!="function")
        People.prototype.friend=function(){
            return this.name + "最好的朋友是雨雨";
        }
    }
}
var people=new People();
console.log(people);
console.log(people.friend());  // 磊磊最好的朋友是雨雨
//People {name: "磊磊", sex: "女", age: "20", sleep: "睡觉"}
age: "20"
name: "磊磊"
sex: "女"
sleep: "睡觉"
__proto__: friend: ƒ ()
constructor: ƒ People()
__proto__: Object

六.单例模式

单指的是返回一个对象

一个功能就是一个单体

    function One(){
        var person=null;
        function Animal(){
            this.name=123;
            this.age=2;
        }
        if(person==null){
            person=new Animal();
        }
        return person;
    }
    console.log(One());
    //Animal {name: 123, age: 2}
	age: 2
	name: 123
	__proto__:
	constructor: ƒ Animal()
	__proto__: Object

七.模块模式

相当于代码的封装

    var model=(function(){
        var Person=null;
        var People=null;
        function animal(){
            this.name=1;
            this.age=2;
        }
        function animal2(){
            this.name=11;
            this.age=22;
        }
        if(Person==null){
            Person=new animal;
        }
        if(People==null){
            People=new animal2();
        }
        return{
            person:Person,
            people:People
        }
    })()
    console.log(model);
    //{person: animal, people: animal2}
	people: animal2
	age: 22
	name: 11
	__proto__: Object
	person: animal
	age: 2
	name: 1
	__proto__: Object
	__proto__: Object