<html>  
<head>  
      
</head>  
<body>  
    <button onclick="person1.introduce()">person1</button>  
    <button onclick="person2.introduce()">person2</button>  
    <button onclick="person3.introduce()">person3</button>  
    <button onclick="person4.introduce()">person4</button>  
    <button onclick="checkFunc()">checkFunc</button>  
    <button onclick="checkFuncByProto()">checkFuncByProto</button><br/>  
    <button onclick="testCnstrct()">testCnstrct</button>  
    <button onclick="testCnstrctpttp()">testCnstrctpttp</button>  
    <button onclick="testDbproto()">testDbproto</button>  
    <button onclick="JSONFontI()">JSONFontI</button>  
    <button onclick="JSONFontII()">JSONFontII</button><br/>  
    <button onclick="testFactory()">testFactory</button>  
    <button onclick="testAbstractFactory()">testAbstractFactory</button>  
      
    <script>  
        var name = "1111111111" 
          
          
          
        /********************************************/ 
        /* 第一种构建对象的办法*/ 
        /* ***推断***,{}即为对象.*/ 
        /********************************************/ 
        var person1 = {};  
        person1.name = "junzi";  
        person1.age = 23;  
        person1.introduce = function () {  
            alert("My name is " + this.name + ".I'm " + this.age);  
        };  
          
          
          
        /********************************************/ 
        /* 第二种构建对象的办法,类似JSON格式":"*/ 
        /********************************************/ 
        var person2 = {  
            name: "junzi",  
            age: 23,  
            introduce: function () {   
                            alert("My name is " + this.name + ".I'm " + this.age);   
                        }  
        };  
          
          
          
        /********************************************/ 
        /* 第三种构建对象的办法,与Java中有些相似*/ 
        /********************************************/ 
        var Person = function () {  
            this.name = "junzi";  
            this.age = 23;  
            this.introduce = function () {  
                                alert("My name is " + this.name + ".I'm " + this.age);  
                            };  
        };  
        var person3 = new Person();  
          
          
          
        /********************************************/ 
        /* 第四种构建对象,与第三种类似,只不过参数通过new 构造传入 */ 
        /********************************************/ 
        var Person = function (name, age) {  
            this.name = name;  
            this.age = age;  
            this.introduce = function () {  
                                alert("My name is " + this.name + ".I'm " + this.age);  
                            };  
        };  
        var person4 = new Person("junzi",23);  
          
          
          
        /********************************************/ 
        /* 看看实例之间的关系@@ */ 
        /********************************************/ 
        var person5 = new Person("chaokong",23);  
        function checkFunc(){  
            alert(person4.introduce==person5.introduce);//结果是false,说明introduce有两个实现分别在4和5中  
            alert(person4.age==person5.age);// 结果是true,说明基本类型的话之比较数值是否相同  
            alert(person4.name==person5.name);// 如果两个名字值不同,则为false,***推测***在javascript中的变量比较的是值是否相同,而方法被视为对象.于是下边...  
        }  
          
          
          
        /********************************************/ 
        /* 通过prototype的方式 */ 
        /********************************************/ 
        var PersonI = function(name,age){  
            this.name = name;  
            this.age = age;  
        }  
        /* 
         * 在JavaScript中,prototype对象是实现面向对象的一个重要机制。 
         * 每个函数就是一个对象(Function),函数对象都有一个子对象,即prototype对象,类是以函数的形式来定义的。 
         * prototype表示该函数的原型,也表示一个类的成员的集合。 
         * 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。 
         * 1、该对象被类所引用,只有函数对象才可引用; 
         * 2、在new实例化后,其成员被实例化,实例对象方可调用。 
         * 同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。  
         */ 
        PersonI.prototype.introduce = function(){  
                                            alert("My name is " + this.name + ".I'm " + this.age);  
                                        }  
        var person6 = new PersonI("junzi",23);  
        var person7 = new PersonI("chaokong",23);  
        function checkFuncByProto(){  
            alert(person6.introduce==person7.introduce);//  
            alert(person6.age==person7.age);  
            alert(person6.name==person7.name);  
        }  
          
          
          
        /********************************************/ 
        /* 研究研究prototype*/ 
        /********************************************/ 
        /* 
         * JavaScript中创建一个对象分以下几步: 
         * <1> var p={}; 也就是说,初始化一个对象p。 
         * <2> p.__proto__=Person.prototype; 
         * <3> Person.call(p);也就是说构造p,也可以称之为初始化p。 
         */ 
        var PersonII = function () { };  
        //通过prototype创建一个方法  
        PersonII.prototype.sayHello = function(){  
            alert("hello");  
        }  
        var p = new PersonII();  
        function testCnstrct(){  
            alert(p.__proto__ === PersonII.prototype);  
        }  
        /* 
         * 首先var p=new PersonII();可以得出p.__proto__=PersonII.prototype。 
         * 那么当我们调用p.sayHello()时,首先p中没有sayHello这个属性, 
         * 于是,他就需要到他的__proto__中去找,也就是PersonII.prototype, 
         * 而我们在上面定义了PersonII.prototype.sayHello=function(){};  
         * 于是,就找到了这个方法。 
         */ 
        function testCnstrctpttp(){  
            p.sayHello();  
        }  
        /** 继续...原型链 */ 
        PersonII.prototype.age = 23;// 设定PersonII的属性  
        var Programmer = function () { };// 创建一个新对象Programmer,可以得出pp.__proto__ = Programmer.prototype;  
        /* 
         * 设 var tempp = new PersonII(); 
         * ∵ Programmer.prototype = new PersonII(); 
         * ∴ Programmer.prototype = tempp; 
         * 
         * ∵ tempp.__proto__ = PersonII.prototype; 
         * ∴ Programmer.prototype.__proto__ = PersonII.prototype; 
         * 设  var pp = new Programmer(); 
         * ∴ pp.__proto__ = Programmer.prototype。 
         * ∴ pp.__proto__.__proto__ = PersonII.prototype。 
         * 
         *  
         * pp中没有sayHello()这个方法,所以到pp.__proto__中查找. 
         * pp.__proto__(也就是Programmer.prototype,也就是tempp,也就是PersonII(),)也没有sayHello()这个方法,所以到pp.__proto__.__proto__中查找 
         * pp.__proto__.__proto__也就是PersonII().prototype,在这里存在sayHello()这个方法 
         * 
         * age属性是同样的道理,只不过在Programmer.prototype的时候就已经找到age了,所以就不继续往下找了. 
         */ 
         /* 这也就是原型链的实现原理。 
         * 其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用, 
         * 他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__! 
         */ 
        Programmer.prototype = new PersonII();// ***   
        Programmer.prototype.writeCode = function () {  
            alert("print 'fuck the js with my jb'");  
        };  
        Programmer.prototype.age = 22;  
        var pp = new Programmer();  
        function testDbproto(){  
            pp.sayHello();  
            pp.writeCode();  
            alert(pp.age);  
        }  
          
          
          
        /********************************************/ 
        /* JSON格式详细 */ 
        /********************************************/ 
        /* 1. */ 
        var PersonIII = {  
            create: function (name, age) {  
                this.name = name;  
                this.age = age;  
            },  
            introduce: function () {  
                alert("Hello,My name is " + this.name + ".I am " + this.age);  
            }  
        }  
      
        function JSONFontI(){  
            /*  
             * 这样是不行的,因为piii = Person.__proto__,而没有这样的 XXX.__proto___=Person.prototype,所以找不到PersonIII内部的方法 
             * var piii = new PersonIII()  
             * piii.create("junzi", 23); 
             * piii.introduce(); 
             */ 
             PersonIII.create("junzi", 23);  
             PersonIII.introduce();  
        }  
          
        /* 2. */ 
        /* 用X做一个中间变量,使得我们可以访问JSON对象的内部属性。*/ 
        function JSONFontII(){  
            var x = function(){ };//必须有function()  
            x.prototype = PersonIII;  
            var px = new x();  
            px.create("junzi", 23);  
            px.introduce();  
        }  
        /* 3. */ 
        /* 工厂模式 */ 
        var Factory = {  
            createPersonIII : function (className,name,age) {  
                                var temp = function () {  
                                    className.create(name, age);  
                                };  
                                temp.prototype = className;  
                                var result = new temp();  
                                return result;  
                            }  
        };  
        function testFactory(){  
            var person = Factory.createPersonIII(PersonIII,"junzi",23);  
            person.introduce();  
        }  
 
        /* 4. */ 
        /* 抽象工厂模式 */ 
        var abstractFactory = {  
            create: function (className, params) {  
                        var temp = function () {  
                                className.create.apply(this, params);  
                        };  
                        temp.prototype = className;  
                        var result = new temp();  
                        return result;  
                    }  
        };  
        function testAbstractFactory(){  
            var person = abstractFactory.create(PersonIII,["junzi",23]);  
            person.introduce();  
        }  
    </script>  
</body>  
</html>