设计模式 —— 原型链模式（2021/5/27)

谁践踏了优雅 2022-10-16 07:23 81阅读 0赞

> 概念

*  原型模式(prototype)是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。
 *  对于原型模式，可以利用JavaScript特有的原型继承特性去创建对象的方式，真正的原型继承是作为最新版的ECMAScript5标准提出的，使用Object.create方法来创建这样的对象，如Object.create(prototype,  
    optionalDescriptorObjects)

> 拟物化解读

*  袋鼠妈妈是小袋鼠的原型，小袋鼠可以和袋鼠妈妈不一样，也不会影响袋鼠妈妈

> 模式作用:

*  1.原型对象本身就是有效地利用了每个构造器创建的对象

> 注意事项:

*  1.注意的依然是浅拷贝和深拷贝的问题，免得出现引用问题。
 *  2.现有的文献里查看原型模式的定义，没有针对JavaScript的，你可能发现很多讲解的都是关于类的，但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概念。

// 原型
    var myobj = { 
            str:'mystring',
            num:1,
            myarr:[30,{ 
                    arrgo:'i am arr'
            }],
            myobj:{ 
                    innerobj:{ 
                            test:25
                    },
                    innerstr:'myobjInnerstr'
            }
    }
    function clone(obj){ 
            var ret = { },k;
            for(k in obj){ 
                    ret[k] = obj[k]
            }
            return ret
    }
    
    // 浅拷贝
    var result = clone(myobj)
    result.myobj.innerstr = 'outter' //myobj 和 result 都改动了
    console.log(myobj,result)
    
    // 深拷贝
    function cloneDeep(obj){ 
            var ret,k,b;
            if((b = (obj instanceof Array)) || obj instanceof Object){ 
                    ret = b ? [] : { };
                    for(k in obj){ 
                            if((obj[k] instanceof Array) || (obj[k] instanceof Object)){ 
                                    ret[k] = cloneDeep(obj[k])
                            }
                            else{ 
                                    ret[k] = obj[k]
                            }
                    }
            }
            return ret
    }
    
    // 深拷贝
    var result = cloneDeep(myobj)
    result.myobj.innerstr = 'outter' //myobj 和 result 都改动了
    console.log(myobj,result)
    
    // es5 create方法
    
    function myobjfn(){ }
    
    myobjfn.prototype = myobj;
    
    function result(){ }
    
    result.prototype = Object.create(myobjfn.prototype)
    
    _result = new result();
    _result.str = '111'
    console.log(myobj)
    console.log(_result.str)