对象

Object Origin Program

对象的属性

let obj = Object.create({},{
    a:{
        configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
        enumerable:true,//是否可枚举
        writable:true,//是否可写
        value:'xxx',//实际值
    },
    b:{
    	configurable:true,
        enumerable:false,
        writable:false,
        value:'66'
	}
})
    
一、定义对象的属性方法
1、defineProperty
Object.defineProperty(obj,'a',{
    configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
    enumerable:true,//是否可枚举
    writable:true,//是否可写
    value:'xxx',//实际值
})
2、defineProperties
Object.defineProperties(obj,{
    a:{
        value:'xxx',
    },
    b:{
        value:'66'
	}
})
//[注意]：省略不写的属性描述符默都是false

二、获取对象的属性的特性
1、getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(obj,'a');
//{
//   value:'xxx',
//}
2、getOwnPropertyDescriptors
Object.getOwnPropertyDescriptor(obj);
//{
//    a:{
//        value:'xxx',
//    },
//    b:{
//        value:'66'
//	  }
//}
//[注意]:Symbol类型的键名属性获取不了

3、Object.getOwnPropertySymbols 
//与getOwnPropertySymbols一样，针对Symbol类型属性

4、Object.getOwnPropertyNames
Object.getOwnPropertyNames(obj);//不管对象属性是否可枚举都能获取到

三、对象属性是否可枚举
Object.propertyIsEnumerable(obj); //true

四、对象是否拥有某属性
Object.hasOwnProperty(obj);//true

Object.is

判断两个参数 是否相等
Object.is(x, y);

不同于 == ：因为它不会强制进行类型转换
不同于 === ：0 与 -0 在Object.is(0,-0)返回 false，两个NaN会判断相等

Object.assign

//把源对象中得非继承可枚举属性分配到目标对象
Object.assign(target, ...source);
1、源对象的属性描述符不会被分配
2、目标对象属性不可写，分配此属性时会报错 
3、源对象为基本类型时，会被包装成对象（String、Number、Boolean、Symbol）

// 下面这个函数会拷贝所有自有属性的属性描述符
function completeAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});

    // Object.assign 默认也会拷贝可枚举的Symbols
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

Object.create

//prototype:继承属性
//self:自身属性 需添加属性描述符
Object.create(prototype,self)

for in 遍历，会遍历出对象prototype上的属性

Object.entries

let obj = {
	a:'aa',
	b:'bb'
}

目标对象必须可枚举,只查找自身的属性不会遍历prototype，结果可直接存入map对象中
let arr = Object.entries(obj);//返回二维数组
//[
//    ['a','aa'],
//    ['b','bb'],
//]
for(let [key, val] in arr){
    console.log(key,val);
    //a aa
    //b bb
}

//原生重写 entries
function myEntries(o){
    let _pool = [];

    //判断o是否为对象
    if(Object.prototype.toString().call(o) ==='[object Object]'){
        //遍历o对象属性
        for(let k in o){
            //去除其prototype上的 属性
            if(Object.hasOwnProperty(o,k)){
                _pool.push({k,o[k]});
            }
        }
    }
    return _pool;
}

Object.fromEntries

let arr = [
    ['a','aa'],
    ['b','bb'],
]

将二维数组(也可以是map对象)转化为一个新的对象，与Object.entries相反
Object.fromEntries(arr);
//{
//	a:'aa',
//	b:'bb'
//}


//原生重写
function myFromEntries(arr){
    let _obj = {}
 	if(arr instanceof Array){
        for(let [key, val] of arr){
            _obj[key] = val;
        }
    }
    return _obj;
}

Object.freeze

该方法可冻结一个对象
冻结后，不可修改删除增加其属性,对象属性修饰符也不能修改,其原型也将禁止修改,
返回和传入的参数相同的对象。
let obj = {
	name:'xxx',
    age:18,
    girlFrind:{
        name:'oo',
        age:18
    }
}

let fobj = Object.freeze(obj);//返回原来的对象
fobj === obj;//true

obj.a = 'xx';//不可增加
obj.age = 20;//不可修改
delete obj.name;//不可删除

不能修改原型本身，但可以操作其属性
obj.__proto__ = {xxx};//不可修改

obj.girlFrind.age = 20;//成功
obj.__proto__.say = function(name){console.log(name)};//成功

Object.freeze是浅冻结，只能冻结一层

//isFrozen 判断一个对象是否被冻结
Object.isFrozen(obj);//参数obj不是对象，在es5环境下会报错 。es6环境返回参数本身


//深度冻结
function deepFreeze(o){
    let attributes = Object.getOwnPropertyNames(o);
    //对嵌套对象递归进行冻结
    if(attributes.length){
        attributes.forEach(item=>{
            if(typeof item == 'object' && item!= null){
                return deepFreeze(item);
            }
        })
    }
    return Object.freeze(o);
}

Object.seal

对象密封

var obj = {
    foo:'bar',
    a:'aaa',
    son:{
		name:'xxx',
        age:18
    }
}
let newObj = Object.seal(obj);
Object.isSealed(newObj); // === true
newObj === obj; //true

obj.b = 'bbb';//失败
obj.a = 'a';//成功
delete obj.foo;//失败

Object.defineProperty(obj, 'foo', {
  get: function() { return 'g'; }
}); // throws a TypeError

obj.__proto__.a = 'xxx';//成功
obj.son.name = 20;//成功
对象密封后，只能修改自身有的属性，不能扩展、删除
跟freeze一样，是浅密封，嵌套对象仍然可以操作

Object.preventExtensions

让一个对象变得不可扩展，永远不能添加属性

var obj = {};
var obj2 = Object.preventExtensions(obj);
obj === obj2;  // true
Object.isExtensible(obj) //=== true

obj.a = 'xxx';//失败

严格模式下添加会报错
Object.preventExtensions()仅阻止添加自身的属性。但其对象类型的原型依然可以添加新的属性，但是不能重写。

对象解构

let obj = {
    name:'www',
    age:18,
    wife:{
        name:'xxx',
        age:16,
    },
    hibbit:['eat','play','code']
}
let p ={};
( {name:p.name,wife:{name:p.wife}} = obj);

// p
{name: "www"
wife: "xxx"}

对象取值

var a = {
    b: 1,
    c: 2,
    key:123
}
for (var key in a) {
    console.log(a.key);// 123
}

a.key的话这种形式底层就是转换成a['key']的形式

    

prototype 特性

1、查询某对象的原型
Object.getPrototypeOf() / Reflect.getPrototypeOf()

2、要确认某对象是不是另一个对象的原型
let p = {x: 1};
let o = Object.create(p);
p.isPrototypeOf(o);// true  o继承p

 instanceof 操作符功能类似

3、修改对象原型
Object.setPrototypeOf(); 类似 Reflect.setPrototypeOf()。

一般来说很少需要使用Object.setPrototypeOf()。JavaScript实现可能会基于对象原型固定不变的假设实现激进的优化。这意味着如果你调用过Object.setPrototypeOf()，那么任何使用该被修改对象的代码都可能比正常情况下慢很多。

继承

-工厂函数
function CreatePersion(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}

let p1 = new CreatePersion('www', 18, 'job');

要创建 Person 的实例，应使用 new 操作符。以这种方式调用构造函数会执行如下操作。
(1) 在内存中创建一个新对象。 
(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
(3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。 
(4) 执行构造函数内部的代码（给新对象添加属性）。 
(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

	无论何时，只要创建一个函数，就会按照特定的规则为这个函数创建一个 prototype 属性（指向 原型对象）。默认情况下，所有原型对象自动获得一个名为 constructor 的属性，指回与之关联的构 造函数。
	对前面的例子而言，p1.prototype.constructor 指向 CreatePersion


 -原型链继承
	function SuperType() { 
        this.colors = ["red", "blue", "green"]; 
    } 

    function SubType() {
		this.name = 'SubType'
    } 
    // 继承 SuperType 
    SubType.prototype = new SuperType(); 

    let instance1 = new SubType(); 

    instance1.colors.push("black"); 
    console.log(instance1.colors); // "red,blue,green,black" 

    let instance2 = new SubType(); 
    console.log(instance2.colors); // "red,blue,green,black"

	优点： 可以继承父类属性，原型上的属性方法
	问题：	
    	-父类原型中包含引用值时，会在所有实例共享
	    -子类型实例化时不能给父类传参
	
-盗用构造函数
	function SuperType(name) { 
        this.name = name;
        this.colors = ["red", "blue", "green"]; 
    } 
    SuperType.prototype.showColors = function(){
        console.log('showColors');
    }
    function SubType() { 
        // 继承 SuperType 
        SuperType.call(this,...arguments); //这里返回 SuperType 的this
        
    } 
    let instance1 = new SubType('试试'); 
    instance1.colors.push("black"); 
	instance1.name = 'xxxx';
    
    console.log(instance1.colors); // "red,blue,green,black" 
    let instance2 = new SubType('迭代'); 
    console.log(instance2.colors); // "red,blue,green"
	instance2.name ;// '迭代'
	优点：
    	可以继承父类构造函数属性
         父类构造函数中引用值不会在所有子类共享
		可以在子类构造函数向父类传参
        
	缺点：
    	父类必须在构造函数中定义方法，因此构造函数不能重用。
    	此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模 式。
		 eg:showColors 方法不在 SuperType构造函数内，所以子类不能继承
        
-组合式继承
    function SuperClass(id){
        this.books = ['javaScript','java','html','css'];
        this.id = id;
        this.go = function(){
            console.log('gogogo')
        }
    }

    SuperClass.prototype.showBooks = function(){
        console.log('showBooks');
    }

    function SubClass(id){
        SuperClass.call(this, id);
    }
    SubClass.prototype = new SuperClass();
    var ins1 = new SubClass(10);
    var ins2 = new SubClass(10);
    ins1.books.push('nodejs')
    ins1.showBooks();

    console.log(ins1);
    console.log(ins2);    
	
	//综合了原型链继承，盗用构造函数继承的优点。是js中使用最多的继承模式。而且组合继 承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。


 -圣杯式继承 【原型式继承+指定constructor】
	修正了子类原型构造函数的指向问题
    //圣杯继承函数
    //共享原型上的属性及方法
    //1、普通写法
    // function inhrit (target, origin) {
    //     function Buffer () {}
    //     Buffer.prototype = origin.prototype;
    //     target.prototype = new Buffer();
    //     //还原构造器
    //     target.prototype.constructor = target;
    //     //设置继承源
    //     target.prototype.supere_class = origin;
    // }

    //2、闭包写法
    var inhrit = (function(){
        function Buffer(){};//闭包写法可以共用缓冲对象
        return function(Target, Origin){
            Buffer.prototype = Origin.prototype;
            Target.prototype = new Buffer();
            //还原构造器
            Target.prototype.constructor = Target;
            //设置继承源
            Target.prototype.supere_class = Origin;
        }
    })()

    function Teacher() {
        name:'我是teacher'
    };
    Teacher.prototype = {
        class:[120,121,1222,123],
        skill(){
            console.log('授课');
        }
    }

    function Student() {
        name:'我是student'
    };

    inhrit(Student, Teacher);

    let teacher = new Teacher();
    let student = new Student();

    console.log(teacher);
    console.log(student);

    //总结
    //优点：子类继承父类原型，子类修改原型属性及方法不影响父类，
    //缺点： 不能继承父类构造函数内的东西，父类原型上引用类型会在所有子类共享

-寄生式继承
	function createAnother(original){ 
        let clone = object(original); // 通过调用函数创建一个新对象 
        clone.sayHi = function() { 
            // 以某种方式增强这个对象 
            console.log("hi"); 
        }; 
        return clone; // 返回这个对象 
    }
//类似于组合式继承，以某种方式增强对象，然后返回这个对象。


-组合寄生式继承
	function SuperClass(id){
        this.books = ['javaScript','java','html','css'];
        this.id = id;
        this.go = function(){
            console.log('gogogo')
        }
    }

    SuperClass.prototype.showBooks = function(){
        console.log('showBooks');
    }

    function SubClass(id, name){
        SuperClass.call(this, id);
        this.name = name;
    }
	function inheritPrototype(subType, superType) { 
        let prototype = object(superType.prototype); // 创建对象 
        prototype.constructor = subType; // 增强对象 
        subType.prototype = prototype; // 赋值对象 
    }

    inheritPrototype(SubClass, SuperClass);
    SubClass.prototype.getName = function(){
        console.log(this.name);
    }
    var ins1 = new SubClass(10,'ww');
    var ins2 = new SubClass(10,'ss');
    ins1.books.push('nodejs')
    ins1.showBooks();

    console.log(ins1);
    console.log(ins2);    
	

-单继承 属性复制
    var extend = function(target, source){
        for(var property in source){
            target[property] = source[property];
        }
    }
    
-多继承
 	var mix = function(){
		var i = 0,
            len = arguments.length,
            arg;
        for(; i < len; i++){
            arg = arguments[i];
            for(var property in arg){
                this[property] = arg[property];
            }
        }
    }

类/ oop

1、类的构成
	类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。 空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。

    
es5

var Book = function(id, name, price){
    //私有属性
    var num = 1;
    //私有方法
    function chechId(){
        
    };
    //安全类 防止为写new关键字
    if(this instanceod Boook){
        this.id = id;
        this.name = name;
        this.price = price;
        //特权方法
        this.getName = function(){};
        this.getPrice = function(){};
        this.setName = function(){};
        this.setPrice = function(){};
        //对象公有属性
        this.id = id;
        //对象公有方法
        this.copy = function(){};
        //构造器
        this.setName(name);
        this.setPrice(price);
    }else{
        return new Book(id, name, price);
    }
    
    
}

es6








2、抽象类
	抽象类只定义，不实现。继承的抽象类的子类必须实现抽象类中的方法。
    大型应用中，总会有一些子类去继承父类。这些父类定义的一些必要的方法，却没有具体实现。当子类创建实例对象，该对象要具备一些必要方法。调用父类中这些方法，如果能有友好提示，对于忘记重写子类的情况是有帮助的。
    JavaScript如何创建抽象类？
    var Car = function (){};
	Car.prototype = {
        getPrice:function(){
            return new Error('抽象方法不能调用');
        },
        getSpeed:function(){
            return new Error('抽象方法不能调用');
        }
    }
	当我们继承 Car 时，子实例调用父类的抽象方法时，如果没有重写，可以起到提示作用。
    
3、抽象类的工厂函数
	var VehicleFactory = function(subType, superType){
        //判断抽象工厂是否有抽象类
        if(typeof VehicleFactory[superType] === 'function'){
            //缓存类
            function F(){};
            //继承父类属性和方法
            F.prototype = new VehicleFactory[superType]();
            //让子类constructor指向子类构造函数
            subType.constructor = subType;
            //子类原型继承‘父类’
            subType.prototype = new F();
        }else{
            //不存在该抽象类抛出错误
            throw new Error('未创建抽象类');
        }
    }
    
    //小汽车抽象类
    VehicleFactory.Car = function(){
        this.type = 'car';
    };
	VehicleFactory.Car.prototype = {
        getPrice:function(){
            return new Error('抽象方法不能调用');
        },
        getSpeed:function(){
            return new Error('抽象方法不能调用');
        }
    }

	//宝马汽车子类
	var BMW = function(price, speed){
        this.price = price;
        this.speed = speed;
    }
    //抽象工厂实现对 Car 抽象类的继承
    VehicleFactory(BMW, 'Car');
	//重写抽象方法
	BMW.prototype.getPrice = function(){
        return this.price;
    }
	BMW.prototype.getSpeed = function(){
        return this.speed;
    }
	
	var bmw = new BMW(230000, 220);
	console.log(bmw);
	bmw.getPrice();//230000   不重写就抛出 Error


3、建造者模式 
	工厂模式：主要为了创建对象实例或者类簇，关心最终产出。
    建造者模式：虽然目的也是创建对象，但是更对关系的是创建这个对象的过程
    
    //-创建一位人类
    var Human = function(params){
     	//技能
        this.skill = params && params.skill || '保密';
        //兴趣爱好
        this.hobby = params && params.hobby || '保密';
    }
    //类人原型方法
    Human.prototype = {
        getSkill:function(){
            return this.skil;
        },
        getHobby:function(){
            return this.hobby;
        }
    }
    //-实例化姓名类
	var Named = function (name){
        var that = this;
        (function(name, that){
            that.wholeName = name;
            if(name.indexOf('  ' > -1)){
                that.FirstName = name.slice(0, name.indexOf('  '));
                that.secondName = name.slice(name.indexOf('  '));
            }
        })(name, that)
    }
    //-实例化职位类
    var Work = function(work){
        var that = this;
        (function(work, that){
            switch(work){
                case 'code':
                    that.work = '工程师';
                    that.workDescript = '成迷于编程无法自拔';
                break;
                case 'UI':
                    that.work = '设计师';
                    that.workDescript = '设计就是艺术';
                break;
                case 'teach':
                    that.work = '教师';
                    that.workDescript = '分享也是一种快乐';
                break;
                default:
                    that.work = work;
                    that.workDescript = '暂无相关描述';
            }
        })(work, that)
    }
	//更换职位
    Work.prototype.changeWork = function(work){
        this.work = work;
    }
	//添加职位描述
    Work.prototype.changeDescript = function(setence){
        this.workDescript = setence;
    }

	
	//创建一个应聘者
	var Person = function(name, work){
        //创建应聘者缓存对象
        var _person = new Human();
        //创建应聘者姓名
        _person.name = new Named(name);
        //创建应聘者职位
        _person.work = new Work(work);
        return _person;
    }
	
    var person = new Person('xiaio  ming', 'code');
	console.log(person)

4、单例模式
	单例模式提供一个命名空间,使模块分明
    var Wang = {
        Util:{
            util_method1:function(){},
            util_method2:function(){},
        },
        Tool:{
            tool_method1:function(){},
            tool_method2:function(){},
            
        },
        Ajax:{
            get:function(){},
            post:function(){},
        },
        Others:{}
    } 
    
    -静态变量	只提供取值访问器
    var conf = (function(){
        //私有变量
        var config = {
            MAX_NUM:100,
            MIN_NUM:1,
            COUNT:1000
        }
        return{
			//取值器方法
            get:function(name){
                return conf[name]?conf[name]:null;
            }
        }
    })()
    
    -惰性单例
    var LazySingle = (function(){
        //单例实例引用
        var _instance = null;
        //单例
        function Single(){
            //定义私有属性和方法
            return {
                publicMethod:function(){},
                publicProperty:'1.0'
            }
        }
        //获取单例对象接口
        return function(){
            //如果单例引用为空，则创建单例
            if(!_instance){
                return new Single();
            }else{
                return _instance;
            }
        }
    })();

5、外观模式
	简化对复杂的底层接口不统一的使用需求,实现代码库如jQuery库
    
    function addEvent(dom, type, fn){
        //支持DOM2级事件处理程序 addeventListener
        if(dom.addeventListener){
            dom.addeventListener(type, fn, false);
         //不支持 DOM2 支持attachEvent
        }else if(dom.attachEvent){
            dom.attachEvent('on'+type, fn);
        }else {
            dom['on'+type] = fn;
        }
    }
	var getEvent = function(event){
        //IE下 window.event
        return event || window.event;
    }
    var getTarget = function(event){
        var event = getEvent(event);
        //IE下 event.srcElement
        return event.target || event.srcElement;
    }
    var preventDefault = function(event){
        var event = getEvent(event);
        //标准
        if(event.preventDefault){
            event.preventDefault();
        }else{
        //IE
            event.returnValue = false;
        }
    }
    
 6、适配器
 		用于兼容适配
    -框架适配


	-参数适配
		function doSomeThing(name, title, age, color, size, prize){};
		//参数过多改成传入对象
		//obj.name:name
		//obj.title:title
		//obj.age:age
		//obj.color:color
		//obj.size:size
		//obj.prize:prize

		//传入参数不知是否完整
		function doSomeThing(obj){
            
            //多传了参数 Object.assign(_adapter, obj)
            var _adapter = {
                name:'xxx',
                title:'标题',
                age:18,
                color:'red',
                size:100,
                prize:50
            }
            for(var i in _adapter){
                _adapter[i] = obj[i] || _adapter[i];
            }
        };
	-数据适配
		将后台返回的数据格式化成我们需要的格式

观察者模式

每个对象既可以发布，又可以订阅。
又称发布订阅模式，或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合


var Observer = (function(){
    var _message = [];
    return {
        // 注册
        register(type, fn){
            if(_message[type] === undefined){
                _message[type] = [fn];
            }else{
                _message[type].push(fn);
            }
        },
        // 发布
        fire(type, args){
            if(!_message[type]){
                return;
            }
            var events = {
                type:type,
                args:args || {}
            },
            i = 0,
            len = _message[type].length;
            for(; i < len; i++){
                _message[type][i].call(this, events);
            }

        },
        // 移除
        remove(type, fn){
            if(_message[type] instanceof Array){
                var i = _message[type].length - 1;
                for(; i >= 0; i--){
                    _message[type][i] === fn && _message[type].splice(i,1);
                }
            }
        }
    }
})()

var Student = function (result) {  
    var that = this;
    that.result = result;
    that.say = function(){
        console.log(that.result);
    }
}
Student.prototype.answer = function(question){
    // 注册参数问题
    Observer.register(question, this.say)
}
Student.prototype.sleep = function(question){
    // 注小参数问题
    console.log(this.result + question + '已被注销');
    Observer.remove(question, this.say)
}

var Teacher = function(){}
Teacher.prototype.ask = function(question){
    console.log('问题是：', question);
    Observer.fire(question);
}

var s1 = new Student('学生1问题'),
    s2 = new Student('学生2问题'),
    s3 = new Student('学生3问题');
s1.answer('啥是爱情？');
s2.answer('啥是爱情？');
s3.answer('啥是赤鸡？');

var t = new Teacher();
t.ask('q');
t.ask('啥是爱情？');

状态模式

当一个对象的内部状态发生变化时，会导致其行为发生变化，看起来像是改变了对象

//例如超级玛丽 角色动作的管理

var MarryState = function(){

    var _currentState = {},
    state = {
        jump: function(){//跳跃
            console.log('jump');
        },
        move: function(){//移动
            console.log('move');
        },
        shoot: function(){//射击
            console.log('shoot');
        },
        squat: function(){//下蹲
            console.log('squat');
        },
    };
    var Action = {
        changeState:function(){
            var arg = arguments;
            _currentState = {};
            if(arg.length){
                for(var i = 0 ,len = arg.length; i < len; i++){
                    _currentState[arg[i]] = true;
                }
            }
            return this;
        },
        goes: function () {  
            console.log('xiuxiu~');
            for (let i in _currentState) {
                state[i] && state[i]();
            }
            return this;
        }
    }
    return {
        change:Action.changeState,
        goes:Action.goes
    }
}


MarryState()
    .change('jump','shoot') //添加动作
    .goes() //执行动作

策略模式

将定义的一组算法封装起来，使其相互之间可以替换。封装的算u你发具有一定的独立性，不会随客户端变化而变化

//它与状态模式很像 ，不同在于 决策模式不需要状态管理，状态间没有依赖关系，决策对象内部相互独立
//策略模式使我们在外部看不到算法具体实现

//需求：节日对部分商品进行打折出售 ，部分5折，8折，9折，普通满100返30 ，vip满100返50... 

var PriceSstrategy = function (){
    var stragtegy = {
        return30 (price){
            return +price + parseInt(price/100)*30
        },
        return90 (price){
            return +price + parseInt(price/100)*90
        },
        return80 (price){
            return +price + parseInt(price/100)*80
        },
    }

    return function (algorithm, price) {  
        return stragtegy[algorithm] && stragtegy[algorithm](price);
    }
}

var price = PriceSstrategy('retuen50','314.67');
console.log(price); //464.67

命令模式

将请求与实现解耦并封装成一个独立对象，从而使不同的请求对客户端实现参数化

<div id="title"></div>
    <div id="product"></div>

    <script>
        var viewCommand = (function(){
            var tpl = {
                //展示图片结构模板
                product :
                    `<div>
                        <img src="{#src#}"/>
                        <p>{#text#}</p>
                    </div>`
                ,
                title:
                    `<div class="title">
                        <div class="main">
                            <h2>{#title#}</h2>
                            <p>{#tips#}</p>
                        </div>
                    </div>`
            },
            html = '';
            function formateString(str, obj){
                console.log(obj);
                return str.replace(/\{#(\w+)#\}/g, function(match, key){
                    return obj[key];
                })
            }
            //创建方法
            var Action = {
                //创建方法
                create : function(data, view){
                    console.log(data);
                    if(data.length){
                        for(let i = 0,len = data.length; i < len; i++ ){
                            html += formateString(tpl[view], data[i]);
                        }
                    }else{
                        html += formateString(tpl[view], data)
                    }
                },
                //展示方法
                display : function(container, data, view){
                    if(data){
                        this.create(data, view);
                    }
                    document.getElementById(container).innerHTML = html;
                    html = '';
                }
            }
            //命令接口
            return function excute(msg){
                console.log(msg);
                msg.param = Object.prototype.toString.call(msg.param) === '[object Array]'?
                msg.param : [msg.param];
                
                Action[msg.command].apply(Action, msg.param);
            };
        })();
        //数据
        var productData = [
            {
                src: '../images/b2.png',
                text:'尼尔机械纪元'
            },
            {
                src: '/images/b1.jpg',
                text:'机械纪元'
            }
        ];
        var titleData = {
            title: '夏日里的一片温馨',
            tips:'暖暖的温泉'
        };
        // 使用
        viewCommand({
            command:'display',
            param:['product',productData,'product']
        });
        viewCommand({
            command:'display',
            param:['title',titleData,'title']
        });
                
    </script>

访问者模式

在不改变操作对象的同时，为它添加新的操作方法，来实现对操作对象的访问结构中元素的新方法

// IE绑定事件时，修改this指向 dom 并 给回调函数传入其他参数data
function bindEvent(dom, type ,fn, data) {  
    var data = data || {};
    dom.attachEvent('on' + type, function (e) {  
        fn.call(dom, e, data);
    })
}

中介者模式

通过中介者对象封装一系列对象之间的交互，使对象之间不在相互引用，降低他们的耦合，有时中介者对象也可以改变对象之间的交互。
   
   var Mediator = function(){
       var _msg = {};
       return {
           register(type, action){
               if(_msg[type]){
                   _msg[type].push(action);
               }else{
                   _msg[type] = [];
                   _msg[type].push(action);
               }
           },
           send(type){
               if(_msg[type]){
                   for (let i = 0; 1 < _msg[type].length; i++) {
                       _msg[type][i] && _msg[type][i]();
                   }
               }
           }
       }
   }()

   Mediator.register('demo',function(){
       console.log('first');
   })
   Mediator.register('demo',function(){
       console.log('second');
   })
   Mediator.send('demo');

备忘录模式

在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便对象使用或者对象恢复到以前位置的某个状态。
   //分页情况下，保留每次请求的信息。下次可以直接使用 缓存信息。
   
   //eg:新闻分页
   var Page = function(){
       var cache = {};
       return function(page, fn){
           if(cache[page]){
               showPage(page, cache[page]);
               fn && fn();
           }else{
               $.post('./data/getNews.php',{page},function(res){
                   if(res.msg === 'success'){
                       showPage(page, res.data);
                       cache[page] = res.data;
                       fn && fn();
                   }else{
                       //处理异常
                   }
               })
           }
       }
   }
   
   memorize记忆函数

迭代器模式

在不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素


数组的迭代
	var eachArray = function(arr, fn){
        var i = 0,
            len = arr.length;
        for(; i < len; i++){
            if(fn.call(arr[i],i,arr[i]) === false){
                break;
            }
        }
    }
    
    var eachObject = function(obj, fn){
        for(var i in obj){
            if(fn.call(obj[key], i, obj[i]) === false){
                break;
           }
        }
    }
]()

解释器模式

对于一种语言，给出其文法，并定义一种解释器，通过使用解释器来解释语言中定义的句子

eg: 统计元素的路劲


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解释器模式</title>
</head>
<body>
    <div></div>
    <div id="container">
        <div>
            <div>
                <ul>
                    <li><span id="span1"></span></li>
                    <li><span id="span2"></span></li>
                </ul>
            </div>
        </div>
        <div>
            <p></p>
            <div>
                <ul>
                    <li><span id="span6"></span></li>
                    <li><span id="span7"></span></li>
                </ul>
            </div>
        </div>
    </div>

    <script>
    var Interpreter = (function(){
        //同级兄弟遍历
        function getSublingName(node){
            if(node.previousSibling){
                var name = '',//返回兄弟元素名称字符串
                    count = 1,//紧邻兄弟元素相同名称元素个数
                    nodeName = node.nodeName,//元素节点名称
                    sibling = node.previousSibling;//前一个兄弟元素
                while(sibling){
                    //前一个兄弟的元素跟目标元素是同种类型
                    if(sibling.nodeType == 1 && sibling.nodeType == sibling.nodeType && sibling.nodeName){
                        //
                        if(nodeName == sibling.nodeName){
                            name += ++count;
                        }else{
                            count = 1;
                            name += '|' + sibling.nodeName.toUpperCase();

                        }
                    }
                    sibling = sibling.previousSibling;//获取前一个兄弟元素
                }
                return name;
            }else{
                return '';
            }
        }

        return function(node, wrap){
            var path = [],
                wrap = wrap || document;
            //目标节点等于容器节点
            if(node === wrap){
                if(wrap.nodeType == 1){
                    //路劲数组中输入容器节点名称
                    path.push(wrap.nodeName.toUpperCase());
                }
                return path;
            }
            //如果当前父节点的父节点不等于容器节点
            if(node.parentNode !== wrap){
                path = arguments.callee(node.parentNode, wrap);
            }
            //当前节点的父节点与容器节点名称
            else{
                if(wrap.nodeType == 1){
                    path.push(wrap.nodeName.toUpperCase());
                }
            }
            var getSublingNames = getSublingName(node);
            //如果节点为元素
            if(node.nodeType == 1){
                path.push(node.nodeName.toUpperCase() + getSublingNames);
            }
            //返回最终路劲数组结果
            return path; 
        }
    })();
        
    var path = Interpreter(document.getElementById('span7'));
    console.log(path.join('>'));
    //HTML>BODY|HEAD>DIV2>DIV2>DIV|P>UL>LI2>SPAN
    </script>
</body>
</html>

参与者模式

//在特定的作用域中执行给定的函数，将函数原封不动的传递

eg://触发事件时，传递额外的参数。这种方式事件解绑不了
function bindEvent(type, ele, fn, data){
	if(ele.addEventListener){
		ele.addEventListener(type, function(e){
            fn.call(ele, e, data)
        }, false);
	}else if(ele.attachEvent){
        ele.attachEvent('on'+type, function(e){
            fn.call(ele, e, data)
        });
    }else{
        ele['on'+type] = function(e){
            fn.call(ele, e, data)
        };
    }
}


//重写bind
//bind方法在低版本浏览器中未被支持
//作用：给函数指定上下文
function bind(fn, context){
    return function(){
        fn.apply(context, arguments);
    }
}
//
function bindEvent(type, ele, fn){
	if(ele.addEventListener){
		ele.addEventListener(type, fn, false);
	}else if(ele.attachEvent){
        ele.attachEvent('on'+type, fn);
    }else{
        ele['on'+type] = fn;
    }
}

var data = {
    name:'xxx',
    age:18
};

var handleFn = function(){
    console.log(this.name)
}
var bindFn = bind(handleFn, data);
//添加事件处理
bindEvent('click',ele, bindFn);
//解除事件绑定
ele.removeEventListener('click', bindFn)


//bind加强版，兼容各浏览器
if(Function.prototype.bind === undefined){
    Function.prototype.bind = function(context){
        var Slice = Array.prototype.slice,
            args = Slice.call(arguments, 1),
        //var [context, ...args] = arguments,
            that = this;
        return function(){
            var addArgs = Slice.call(arguments),
                allArgs = args.concat(addArgs);
            return that.apply(context, allArgs);
         	//return that.apply(context, [...args, ...arguments]);   
        }
        
    }
}

等待者模式

通过对多个异步进程进行监听，来触发未来发生的动作

es6 的 promise async await

设计模式

创建型模式

工厂方法模式

	工厂方法模式建议使用特殊的工厂方法代替对于对象构造函数的直接调用 （即使用 new运算符）。 
	不用担心， 对象仍将通过 new运算符创建， 只是该运算符改在工厂方法中调用罢了。 工厂方法返回的对象通常被称作 “产品”。

    工厂模式是对new的一个封装，遇到new时就该考虑是否要用工厂模式
// eg1
function Animal(opts){
    var obj = new Object();
    obj.color = opts.color;
    obj.name= opts.name;
    obj.getInfo = function(){
        return '名称：'+ onj.name+'， 颜色：'+ obj.color;
    }
    return obj;
}
var cat = Animal({name: '波斯猫', color: '白色'});
cat.getInfo();


// eg2
class Product {
  constructor(name) {
    this.name = name
  }
  getName () {
    return this.name
  }
}

class Factory {
  create (name) {
    return new Product(name)
  }
}
// 创建一个工厂
const f1 = new Factory()
//拿到构造函数的实例
const f2 = f1.create('Jerry')
console.log(f2.getName()) // Jerry

- 构造函数和创建者分离
- 符合开放封闭原则

// eg3
 var factory = (function(){
     var cars = {
         car1:function(){
             this.color="黑色",
                 this.type ="劳斯莱斯",
                 this.price="80000000",
                 this.speed="600匹马力"
         },
         car2:function(){
             this.color="白色",
                 this.type ="宝马",
                 this.price="450000",
                 this.speed="200匹马力"
         },
         car3:function(){
             this.color="炫光红紫色",
                 this.type ="奥迪",
                 this.price="400000",
                 this.speed="190匹马力"
         }
     }
     return function (config){
         return new cars[config]();
     }
 })();

var car1 = factory('car1');
var car2 = factory('car2');

console.log(car1.type);
console.log(car2.type);

抽象工厂模式

抽象工厂模式(Abstract Factory)就是通过类的抽象使得业务适用于一个产品类簇的创建，而不负责某一类产品的实例。

	JS中是没有直接的抽象类的，abstract是个保留字，但是还没有实现，因此我们需要在类的方法中抛出错误来模拟抽象类，如果继承的子类中没有覆写该方法而调用，就会抛出错误。

// eg:
    const Car = function() { }
    Car.prototype.getPrice = function() {return new Error('抽象方法不能调用')}

实现
    面向对象的语言里有抽象工厂模式，首先声明一个抽象类作为父类，以概括某一类产品所需要的特征，继承该父类的子类需要实现父类中声明的方法而实现父类中所声明的功能：
    
eg:// 

/* 饭店方法 */
class Restaurant {
    static orderDish(type) {
        switch (type) {
            case '鱼香肉丝':
                return new YuXiangRouSi()
            case '宫保鸡丁':
                return new GongBaoJiDin()
            default:
                throw new Error('本店没有这个 -。-')
        }
    }
}

/* 菜品抽象类 */
class Dish {
    constructor() {
        if (new.target === Dish) {
            throw new Error('抽象类不能直接实例化!')
        }
        this.kind = '菜'
    }
    
    /* 抽象方法 */
    eat() { throw new Error('抽象方法不能调用!') }
}

/* 鱼香肉丝类 */
class YuXiangRouSi extends Dish {
    constructor() {
        super()
        this.type = '鱼香肉丝'
    }
    
    eat() { console.log(this.kind + ' - ' + this.type + ' 真香~') }
}

/* 宫保鸡丁类 */
class GongBaoJiDin extends Dish {
    constructor() {
        super()
        this.type = '宫保鸡丁'
    }
    
    eat() { console.log(this.kind + ' - ' + this.type + ' 让我想起了外婆做的菜~') }
}

const dish0 = new Dish()// 输出: Error 抽象方法不能调用!
const dish1 = Restaurant.orderDish('鱼香肉丝')
dish1.eat() // 输出: 菜 - 鱼香肉丝 真香~
const dish2 = Restaurant.orderDish('红烧排骨') // 输出: Error 本店没有这个 -。-




// eg: 饭店抽象化
/* 饭店 抽象类，饭店都可以做菜和汤 */
class AbstractRestaurant {
    constructor() {
        if (new.target === AbstractRestaurant)
            throw new Error('抽象类不能直接实例化!')
        this.signborad = '饭店'
    }
    
    /* 抽象方法：创建菜 */
    createDish() { throw new Error('抽象方法不能调用!') }
    
    /* 抽象方法：创建汤 */
    createSoup() { throw new Error('抽象方法不能调用!') }
}

/* 具体饭店类 */
class Restaurant extends AbstractRestaurant {
    constructor() { super() }
    
    createDish(type) {
        switch (type) {
            case '鱼香肉丝':
                return new YuXiangRouSi()
            case '宫保鸡丁':
                return new GongBaoJiDing()
            default:
                throw new Error('本店没这个菜')
        }
    }
    
    createSoup(type) {
        switch (type) {
            case '紫菜蛋汤':
                return new ZiCaiDanTang()
            default:
                throw new Error('本店没这个汤')
        }
    }
}

/* 菜 抽象类，菜都有吃的功能 eat */
class AbstractDish {
    constructor() {
        if (new.target === AbstractDish) {
            throw new Error('抽象类不能直接实例化!')
        }
        this.kind = '菜'
    }
    
    /* 抽象方法 */
    eat() { throw new Error('抽象方法不能调用!') }
}

/* 菜 鱼香肉丝类 */
class YuXiangRouSi extends AbstractDish {
    constructor() {
        super()
        this.type = '鱼香肉丝'
    }
    
    eat() { console.log(this.kind + ' - ' + this.type + ' 真香~') }
}

/* 菜 宫保鸡丁类 */
class GongBaoJiDing extends AbstractDish {
    constructor() {
        super()
        this.type = '宫保鸡丁'
    }
    
    eat() { console.log(this.kind + ' - ' + this.type + ' 让我想起了外婆做的菜~') }
}

/* 汤 抽象类，汤都有喝的功能 drink */
class AbstractSoup {
    constructor() {
        if (new.target === AbstractDish) {
            throw new Error('抽象类不能直接实例化!')
        }
        this.kind = '汤'
    }
    
    /* 抽象方法 */
    drink() { throw new Error('抽象方法不能调用!') }
}

/* 汤 紫菜蛋汤类 */
class ZiCaiDanTang extends AbstractSoup {
    constructor() {
        super()
        this.type = '紫菜蛋汤'
    }
    
    drink() { console.log(this.kind + ' - ' + this.type + ' 我从小喝到大~') }
}


const restaurant = new Restaurant()

const soup1 = restaurant.createSoup('紫菜蛋汤')
soup1.drink() // 输出: 汤 - 紫菜蛋汤 我从小喝到大~
const dish1 = restaurant.createDish('鱼香肉丝')
dish1.eat()// 输出: 菜 - 鱼香肉丝 真香~
const dish2 = restaurant.createDish('红烧排骨')  // 输出: Error 本店没有这个 -。-





// 抽象工厂模式的通用实现

	我们提炼一下抽象工厂模式，饭店还是工厂（Factory），菜品种类是抽象类（AbstractFactory），而实现抽象类的菜品是具体的产品（Product），通过工厂拿到实现了不同抽象类的产品，这些产品可以根据实现的抽象类被区分为类簇。主要有下面几个概念：
Factory ：工厂，负责返回产品实例；
AbstractFactory ：虚拟工厂，制定工厂实例的结构；
Product ：产品，访问者从工厂中拿到的产品实例，实现抽象类；
AbstractProduct ：产品抽象类，由具体产品实现，制定产品实例的结构；

/* 工厂 抽象类 */
class AbstractFactory {
    constructor() {
        if (new.target === AbstractFactory) 
            throw new Error('抽象类不能直接实例化!')
    }
    
    /* 抽象方法 */
    createProduct1() { throw new Error('抽象方法不能调用!') }
}

/* 具体饭店类 */
class Factory extends AbstractFactory {
    constructor() { super() }
    
    createProduct1(type) {
        switch (type) {
            case 'Product1':
                return new Product1()
            case 'Product2':
                return new Product2()
            default:
                throw new Error('当前没有这个产品 -。-')
        }
    }
}

/* 抽象产品类 */
class AbstractProduct {
    constructor() {
        if (new.target === AbstractProduct) 
            throw new Error('抽象类不能直接实例化!')
        this.kind = '抽象产品类1'
    }
    
    /* 抽象方法 */
    operate() { throw new Error('抽象方法不能调用!') }
}

/* 具体产品类1 */
class Product1 extends AbstractProduct {
    constructor() {
        super()
        this.type = 'Product1'
    }
    
    operate() { console.log(this.kind + ' - ' + this.type) }
}

/* 具体产品类2 */
class Product2 extends AbstractProduct {
    constructor() {
        super()
        this.type = 'Product2'
    }
    
    operate() { console.log(this.kind + ' - ' + this.type) }
}


const factory = new Factory()

const prod1 = factory.createProduct1('Product1')
prod1.operate() // 输出: 抽象产品类1 - Product1
const prod2 = factory.createProduct1('Product3') // 输出: Error 当前没有这个产品 -。-








// eg:2 
// 首先准备我们的实体类,还是使用之前的工厂模式的案例讲解
class Dog{
    run(){
        console.log('Dog-----')
    }
}

class Cat{
    run(){
        console.log('Cat-----')
    }
} 

// ****************************

class Male{
    run(){
        console.log('male-----')
    }
}

class Femail{
    run(){
        console.log('female-----')
    }
}

// 然后准备我们的工厂类
/*假设 Cat 和 Dog，属于 Animal 工厂的产品；Male 和 Female 属于 Person 工厂的产品。所以需要实现 2 个工厂类：Animal 和 Person。

由于工厂类上面还有个超级工厂，为了方便工厂类生产实体，工厂类应该提供生产实体的方法接口。

为了更好的约束工厂类的实现，先实现一个抽象工厂类：*/



class AbstrctFactory{
    getPersion(){
        throw new Error('请先实现子类方法')
    }
    getAnimal(){
        throw new Error('请先实现子类方法')
    }
}

// 实现了抽象工厂之后，开始我们的Persion工厂和Animal工厂的创建

class PersonFactory extends AbstrctFactory{
    getPersion(persion){
        switch (persion) {
            case 'male':
                return new Male();
            case 'female':
                return new Female();
            default:
                break;
        }
    }

    getAnimal(){
        return null;
    }
}

class AnimalFactory extends AbstrctFactory{
    getAnimal(animal){
        animal = animal.toLowerCase();
        switch (animal) {
            case 'dog':
                return new Dog();
            case 'cat':
                return new Cat();
            default:
                break;
        }
    }

    getPersion(){
        return null;
    }
}

// 最后实现我们的超级工厂类
class superFactory{
    constructor(type){
        switch (type) {
            case 'persion':
                return new PersonFactory();
            case 'animal':
                return new AnimalFactory();
            default:
                break;
        }
    }
}

// 最后开始我们的调用代码测试
// 首先我们根据抽象工厂创建persion工厂，可以获取到getPersion方法
let persion = new superFactory('persion');
// 然后根据persion工厂类便可以获取真正的persion分类个体mail与femle
let male = persion.getPersion('male');
// 最后调用子类的具体方法
male.run() // male

// 注意：最上面的抽象工厂中，如果子类工厂persion或者animal没有实现getPersion或者getAnimail方法，那么会抛出错误

// 以下为AnimalFactory测试
let animal = new superFactory('animal');
let dog = animal.getAnimal('Dog');
dog.run();

// 细心的小伙伴发现了我在创建animal工厂的时候加入了一行统一小写的代码---->  animal = animal.toLowerCase();
// 其实正常来说，为了防止报错，不管调用者传入的名称是大写还是 小写都能找到对应的方法去实例化



// 概念差异
1、工厂
	工厂是一个含义模糊的术语， 表示可以创建一些东西的函数、 方法或类。 最常见的情况下， 工厂创建的是对象。 但是它们也可以创建文件和数据库记录等其他东西。

例如， 下面这些东西都可以非正式地被称为 “工厂”：

-创建程序 GUI 的函数或方法；
-创建用户的类；
-以特定方式调用类构造函数的静态方法。
-一种创建型设计模式。

2、构建方法
	在实际中， 构建方法只是构造函数调用的封装器。 它可能只是一个能更好地表达意图的名称。 此外， 它可以让你的代码独立于构造函数的改动， 甚至还可以包含一些特殊的逻辑， 返回已有对象以而不是创建新对象。
    class Number {
        private $value;

        public function __construct($value) {
            $this->value = $value;
        }
		// next 是一个构建方法
        public function next() {
            return new Number ($this->value + 1);
        }
    }
3、静态构建方法
	静态构建方法是被声明为 static的构建方法。 换句话说， 你无需创建对象就能在某个类上调用该方法。
    
4、简单工厂模式
	简单工厂模式 描述了一个类， 它拥有一个包含大量条件语句的 "构建方法"， 可根据方法的参数来选择对何种产品进行初始化并将其返回。
    class AnimalFactory extends AbstrctFactory{
        // getAnimal 是一个构建方法
        getAnimal(animal){
            animal = animal.toLowerCase();
            switch (animal) {
                case 'dog':
                    return new Dog();
                case 'cat':
                    return new Cat();
                default:
                    break;
            }
        }

        getPersion(){
            return null;
        }
    }
5、工厂方法模式
	工厂方法 是一种创建型设计模式， 其在父类中提供一个创建对象的方法， 允许子类决定实例化对象的类型。
    如果在基类及其扩展的子类中都有一个构建方法的话， 那它可能就是工厂方法。
    在绝大多数情况下， 简单工厂是引入工厂方法或抽象工厂模式时的一个中间步骤。
    abstract class Department {
        public abstract function createEmployee($id);

        public function fire($id) {
            $employee = $this->createEmployee($id);
            $employee->paySalary();
            $employee->dismiss();
        }
    }

    class ITDepartment extends Department {
        public function createEmployee($id) {
            return new Programmer($id);
        }
    }

    class AccountingDepartment extends Department {
        public function createEmployee($id) {
            return new Accountant($id);
        }
    }
6、抽象工厂
	抽象工厂 是一种创建型设计模式， 它能创建一系列相关或相互依赖的对象， 而无需指定其具体类。

什么是 “系列对象”？ 例如有这样一组的对象： ​ 运输工具+ 引擎+ 控制器 。 它可能会有几个变体：

    汽车+ 内燃机+ 方向盘
    飞机+ 喷气式发动机+ 操纵杆
    如果你的程序中并不涉及产品系列的话， 那就不需要抽象工厂。

再次重申， 许多人分不清抽象工厂模式和声明为 abstract的简单工厂。 不要犯这个错误！

生成器模式

生成器模式是一种创建型设计模式， 使你能够分步骤创建复杂对象。 该模式允许你使用相同的创建代码生成不同类型和形式的对象。

• 本文作者： 王不留行
• 本文链接： https://wyf195075595.github.io/2022/06/17/programming/javascript/对象/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！