美文网首页
重点--使用工厂方法创建对象

重点--使用工厂方法创建对象

作者: 潘肚饿兵哥哥 | 来源:发表于2019-06-24 12:42 被阅读0次

    使用工厂模式创建对象:

    function createPerson(){
            var obj = new Object();
            obj.name = "孙悟空";
            obj.age = 18;
            obj.sayHello = function(){
                alert(this.name);
            };
            
            return obj;
        }
        
        var obj2 = createPerson();
        var obj3 = createPerson();
        var obj4 = createPerson();
        
        console.log(obj2);
        console.log(obj3);
        console.log(obj4);
    
    使用工厂  createPerson  批量创建对象:obj2、obj3、obj4
    ,但是此时只能创建出对象孙悟空  如下图
    
    image.png

    \color{rgba(254, 67, 101, .8)}{上面的写法能批量创建对象,但是都是孙悟空,因为属性被写死了}

    \color{rgba(254, 67, 101, .8)}{所以需要用传参的方式创建}

    function createPerson(name,age,gender){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.age = gender;
            obj.sayHello = function(){
                alert(this.name);
            };
            
            return obj;
        }
        
        var obj2 = createPerson();
        var obj3 = createPerson();
        var obj4 = createPerson();
        
        console.log(obj2);
        console.log(obj3);
        console.log(obj4);
    返回值如下图:
    
    image.png

    \color{rgba(254, 67, 101, .8)}{传参:}

    function createPerson(name,age,gender){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
                alert(this.name);
            }
            
            return obj;
        }
        
        var obj2 = createPerson("猪八戒",18,"男");
        var obj3 = createPerson("孙悟空",18,"男");
        var obj4 = createPerson("沙和尚",18,"男");
        
        console.log(obj2);
        console.log(obj3);
        console.log(obj4);
    返回值:
    
    image.png

    \color{rgba(254, 67, 101, .8)}{还是上面这个例子:}

    function createPerson(name,age,gender){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
                alert(this.name);//返回值就是obj
            }
            
            return obj;
        }
        
        var obj2 = createPerson("猪八戒",18,"男");
        var obj3 = createPerson("孙悟空",18,"男");
        var obj4 = createPerson("沙和尚",18,"男");
        
        obj3.sayName();
    
     不用console.log(obj2);调,用obj3.sayName();调的话:返回值如下图
    
    image.png

    完整代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                /*
                 * 创建一个对象
                 */
                var obj = {
                        name:"孙悟空",
                        age:18,
                        gender:"男",
                        sayName:function(){
                            alert(this.name);
                        }
                };
                //obj.sayName();返回值:  孙悟空
    
                /*
                 *如果按上面的办法要多创建一些类似对象的话,就是单纯的复制粘贴,很麻烦
                 * 所以:
                 * 使用工厂方法创建对象
                 *  通过该方法可以大批量的创建对象
                 * 
                 * 通过此方法,把相同的部分都提取出来,然后再调用即可
                 */
                function createPerson(name , age ,gender){
                    //创建一个新的对象 
                    var obj = new Object();  
                    //这个obj和上面的obj不是一个obj,
                    //这个是局部的,上面是全局的
                    
                    //向对象中添加属性
                    obj.name = name;
                    obj.age = age;
                    obj.gender = gender;//现在,上面创建的对象中有了三个属性,一个方法
                    obj.sayName = function(){
                        alert(this.name);
                    };
                    //将新的对象返回
                    return obj;
                }
                
                /*
                 * 用来创建狗的对象
                 */
                function createDog(name , age){
                    var obj = new Object();
                    obj.name = name;
                    obj.age = age;
                    obj.sayHello = function(){
                        alert("汪汪~~");
                    };
                    
                    return obj;
                }
                
                var obj2 = createPerson("猪八戒",28,"男");
                var obj3 = createPerson("白骨精",16,"女");
                var obj4 = createPerson("蜘蛛精",18,"女");
                /*
                 * 使用工厂方法创建的对象,使用的构造函数都是Object
                 *  所以创建的对象都是Object这个类型,
                 *  就导致我们无法区分出多种不同类型的对象
                 */
                //创建一个狗的对象
                var dog = createDog("旺财",3);
                
                console.log(dog);
                console.log(obj4);
                
                
            </script>
        </head>
        <body>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:重点--使用工厂方法创建对象

          本文链接:https://www.haomeiwen.com/subject/emlgqctx.html