felayman——javascript设计模式-优快云博客

本文深入解析JavaScript中的工厂模式和原型模式，包括如何使用工厂模式创建对象和原型模式实现全局共享属性与方法，同时指出这两种模式在不同浏览器版本的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript">
       /*
          1.工厂模式
            在使用javascript的Object来创建对象的时候,我们使用同一个接口
            的时候,会产生大量的代码,此时使用工厂模式,我们只需要提供一个创建
            对象的接口,而不是每每需要对象的时候都要去new一个对象,我们只需要
            面向接口来生产对象就可以,但是javascript并不象java那样可以直接
            使用接口,因此在javscript中是使用函数来伪装接口形式,如下：
       */
        //假设我们通过工厂模式来生产用户
        function createUserFactory(name,age,job){
            var obj =  new Object();
            obj.name=name;//因为我在使用ide的时候设置参数都带下弧线,因此此处就显示出属性和参数的区别
            obj.age = age;
            obj.job = job;
            obj.getcontent = function(){
                alert("姓名:"+this.name+",年龄:"+this.age+",职业:"+this.job);
            }
            return obj;
        }
        //上述代码就使用工厂模式来替我们来创建User对象,当然这种情况一般是在我们需要频繁
        //去创建User对象了
        //我们进行测试
        var user1 = createUserFactory("felayman1",22,"学生");
        var user2 =createUserFactory("felayman2",22,"CTO");
        //user1.getcontent();//测试成功
        //user2.getcontent();//测试成功
        /*
            2.原型模式
            其实这种模式,也是相当于利用javascript的原型来模拟了java里面的
            静态变量和静态方法,目的是创建出全局共享的属性和方法,java中的static
            变量和属性是类所共享,或者是所有对象所共享,但是javascript没有类这个
            说法,因此,只能通过利用javascript的原型属性prototype属性来模拟了
            但是这个需要很高的浏览器版本,google和firefox的最新版本会支持,IE所有
            版本均不支持,包括最新的IE11
            我的浏览器版本分别是chorme 33  firefox 28 IE6-IE9(IEtester)IE11
            经过测试,这种原型模式,只有chorme和firefox支持,ie均不支持
            如下:
         */
        function person (){};//创建一个person对象模板
       /*
        千万不要这么写啊 var person ={};这样写就是跟var person = new Object()
        这样写等于直接创建了一个对象,就不是模拟类模板了
       */
        person.prototype.name="felayman";
        person.prototype.age=22;
        person.prototype.getContent=function(){
            alert(this.name+this.age);
        };
    //测试使用
     //alert(person.name);//firefox和chorme支持
     //person.getcontent();//很遗憾都不支持,其实这就是做前度的痛点(还好我只是兴趣)
     //下面是更简洁的原型模式的写法
        function Person(){}
        Person.prototype = {
            name:"felayman",
            age:22,
            job:"学生",
            getContent:function(){
                alert(this.name+this.age+this.job);
            }
        }
       //测试
        var per = new Person();
       //alert(per.name+per.age+per.job);//ok测试成功
        //per.getContent();
        /*
            由此可以直到,主流的浏览器逐渐喜欢json格式了,在一般的开发中,
            这两种设计模式,是最多的.也是极力推荐使用的
         */
    </script>
    <title>javascript的设计模式</title>
</head>
<body>

</body>
</html>