<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Javascript对象的简单学习</title>
</head>
<body>
      
    <script type="text/javascript">
        (function(){
              
            /**
             *  1.Javascript对象的简单学习
             */
/*          var user = {
                name : "tom",
                age : 23,
                "address" : "USA", //属性名也可以是双引号
                sayName : function(){
                    document.writeln(this.name + "----" + this.address );
                }
            };
            //调用
            document.writeln(user.name);
            document.writeln(user.sayName());*/
            /**
             * 2.创建对象：工厂模式。JS中没有类的概念，但是又保留字class,表示未来可能会有类的定义。
             */
/*          function createUser(name,age) {
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                obj.sayName = function() {
                    document.writeln("用户名为：" + this.name + "<br />");
                }
                return obj;
            }
            //创建对象
            var user1 = createUser("tom",21);
            var user2 = createUser("jerry",22);
            //调用
            document.writeln(" --- user1:" + user1.name + " <br />");
            user2.sayName();
            //判断user1类型
            document.writeln(" 利用typeof判断user1：" + typeof user1 + "<br />"); //object
            //document.writeln(" 利用instanceof判断user1：" + user1 instanceof User);
            document.writeln(" user1的构造方法：" + user1.constructor);//function Object() { [native code] }
            //说明：虽然通过工厂模式可以创建对象，但是无法知道对象的类型，比如：instanceof
*/
            /**
             * 3.创建对象：构造函数模式
             */
/*          function User(name,age) {
                this.name = name;
                this.age = age;
                this.sayName = function() {
                    document.writeln(" --- 构造方法创建函数：" + this.name + "<br />");
                };
            }
            //创建对象
            var user1 = new User("tom",21);
            var user2 = new User("jerry",23);
            //调用
            document.writeln(" ---- user1.name :" + user1.name + "<br />");
            user2.sayName();
            //判断user1类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            //document.writeln("判断user1是否为Object类型：" + (user1 instanceof Object) + "<br />"); 注意这么写是不能正常打印。
            document.writeln( user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName); // false → 说明sayName被创建多次，浪费内存
*/
            /**
             * 3.1 构造函数升级版
             */
/*          function User(name,age) {
                this.name = name;
                this.age = age;
                this.sayName = sayName;
            }
            function sayName() {
                document.writeln(" --- 构造方法创建函数：" + this.name + "<br />");
            }
            //创建对象
            var user1 = new User("tom",21);
            var user2 = new User("jerry",23);
            //调用
            document.writeln(" ---- user1.name :" + user1.name + "<br />");
            user2.sayName();
            //判断user1类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            //document.writeln("判断user1是否为Object类型：" + (user1 instanceof Object) + "<br />"); 注意这么写是不能正常打印。
            document.writeln( user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName);
             // true → ★表示是同一个函数，但是其缺点：当方法很多时，需要些很多的全局函数
            document.writeln("构造函数：" + user1.constructor);
            //function User(name,age) { this.name = name; this.age = age; this.sayName = sayName; }
*/
            /**
             * 4.创建对象：原型对象
             */
/*          function User(){}
            User.prototype.name = ""; //初始值为""
            User.prototype.age = 0; //初始值为0
            User.prototype.sayName = function() {
                document.writeln(" --- 原型对象创建函数：" + this.name + "<br />");
            }
            //创建对象
            var user1 = new User();
            user1.name = "tom";
            user1.age = 21;
            var user2 = new User();
            user2.name = "jerry";
            user2.age = 23;
            //调用
            user1.sayName();
            user2.sayName();
            //判断user1类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            document.writeln(user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName);// true → ★表示是同一个函数
            document.writeln("构造函数：" + user1.constructor); //function User(){}
              
            //缺点：1.不能具有构造函数。2.属性引用对象类型时会发生共享问题。(见下面)
*/
/*          function User(){}
            User.prototype.name = ""; //初始值为""
            User.prototype.age = 0; //初始值为0
            User.prototype.address = []; //初始值为空数组[],对象
            User.prototype.sayName = function() {
                document.writeln(" --- 原型对象创建函数：" + this.name + "<br />");
            }
            //创建对象
            var user1 = new User();
            user1.name = "tom";
            user1.age = 21;
            user1.address.push("USA","CHINA");
            var user2 = new User();
            user2.name = "jerry";
            user2.age = 23;
            user2.address.push("CANADA");
            //调用
            document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA,CANADA
            document.writeln("user2.address :" + user2.address + "<br />"); //USA,CHINA,CANADA
            //判断user1的类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            document.writeln(user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName);// true → ★表示是同一个函数
            document.writeln("构造函数：" + user1.constructor); //function User(){}
*/
            /**
             * 5.★创建对象： 混合模型 = 构造方法(属性做的比较好) + 原型(方法做的比较好)
             */
/*          function User(name,age) {
                this.name = name;
                this.age = age;
                this.address = [];
            }
            User.prototype.sayName = function() {
                document.writeln(" --- 混合型创建函数：" + this.name + "<br />");
            };
            //创建对象
            var user1 = new User();
            user1.name = "tom";
            user1.age = 21;
            user1.address.push("USA","CHINA");
            var user2 = new User();
            user2.name = "jerry";
            user2.age = 23;
            user2.address.push("CANADA");
            //调用
            document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA
            document.writeln("user2.address :" + user2.address + "<br />"); //CANADA
            //判断user1的类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            document.writeln(user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName);// true → ★表示是同一个函数
            document.writeln("构造函数：" + user1.constructor);
            //function User(name,age) { this.name = name; this.age = age; this.address = []; }
*/
            /**
             * 6.★创建对象：动态原型模型
             */
/*          function User(name,age) {
                this.name = name;
                this.age = age;
                this.address = [];
                //alert(typeof this.sayName);
                if(typeof this.sayName != "function") {
                    User.prototype.sayName = function() {
                        document.writeln(" --- 动态原型创建对象：" + this.name);
                    }
                }
            }
              
            //创建对象
            var user1 = new User();
            user1.name = "tom";
            user1.age = 21;
            user1.address.push("USA","CHINA");
            var user2 = new User();
            user2.name = "jerry";
            user2.age = 23;
            user2.address.push("CANADA");
            //调用
            document.writeln("user1.address :" + user1.address + "<br />"); //USA,CHINA
            document.writeln("user2.address :" + user2.address + "<br />"); //CANADA
            //判断user1的类型
            document.writeln(user1 instanceof Object); //判断是否为Object类型 → true
            document.writeln(user1 instanceof User); // 判断是否为User类型 → true
            document.writeln(user1.sayName  == user2.sayName);// true → ★表示是同一个函数
            document.writeln("构造函数：" + user1.constructor);
            //function User(name,age) { this.name = name; this.age = age; this.address = []; //alert(typeof this.sayName); if(typeof this.sayName != "function") { User.prototype.sayName = function() { document.writeln(" --- 动态原型创建对象：" + this.name); } } }
*/
            /**
             * 7.-------------创建对象实例
             * 在Javascript中，字符串的拼接将会非常消耗性能。(因为要不断的销毁对象，重建对象)
             * 解决办法：是创建一个类似Java中的StringBuffer的对象
             */
             function StringBuffer() {
                this.array = new Array();
                if(typeof this.append != "function") {
                    StringBuffer.prototype.addHan = function(str) {
                        this.array.push(str);
                    };
                }
             }
             StringBuffer.prototype.toString = function() {
                return this.array.join("");
             };
             var sb = new StringBuffer();
             sb.addHan("hanchao1");
             sb.addHan("hanchao2");
             sb.addHan("hanchao3");
             document.writeln(sb);
          
        })();
    </script>
</body>
</html>