6、js——创建对象方式

一、工厂方法创建对象(了解即可,用的不多)

        <script type="text/javascript">
            
            /*
             * 创建一个对象
             */
            var obj = {
                    name:"孙悟空",
                    age:18,
                    gender:"男",
                    sayName:function(){
                        alert(this.name);
                    }
            };
            
            //--------------------------------------------------------------------------
            
            /*
             * 使用工厂方法创建对象
             *     通过该方法可以大批量的创建对象
             */
            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;
            }
            
            /*
             * 用来创建狗的对象
             */
            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(JSON.stringify(dog));//{"name":"旺财","age":3}
            console.log(JSON.stringify(obj4));//{"name":"蜘蛛精","age":18,"gender":"女"}
            
            
        </script>

二、构造函数

       <script type="text/javascript">
        
            /*
             * 创建一个构造函数,专门用来创建Person对象的
             *     构造函数就是一个普通的函数,创建方式和普通函数没有区别,
             *     不同的是构造函数习惯上首字母大写
             * 
             * 构造函数和普通函数的区别就是调用方式的不同
             *     普通函数是直接调用,而构造函数需要使用new关键字来调用
             * 
             * 构造函数的执行流程:
             *     1.立刻创建一个新的对象
             *     2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
             *     3.逐行执行函数中的代码
             *     4.将新建的对象作为返回值返回
             * 
             * 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
             *     我们将通过一个构造函数创建的对象,称为是该类的实例
             * 
             * this的情况:
             *     1.当以函数的形式调用时,this是window
             *     2.当以方法的形式调用时,谁调用方法this就是谁
             *     3.当以构造函数的形式调用时,this就是新创建的那个对象
             * 
             */
            
            function Person(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                this.sayName = function(){
                    alert(this.name);
                };
            }
            
            function Dog(){
                
            }
            
            var per = new Person("孙悟空",18,"男");
            var per2 = new Person("玉兔精",16,"女");
            var per3 = new Person("奔波霸",38,"男");
            
            var dog = new Dog();
            
            console.log(JSON.stringify(per));//{"name":"孙悟空","age":18,"gender":"男"}
            console.log(JSON.stringify(dog));//{}
            
            //-------------------------------------------------------------------------------
            
            /*
             * 使用instanceof可以检查一个对象是否是一个类的实例
             *     语法:
             *         对象 instanceof 构造函数
             * 如果是,则返回true,否则返回false
             */
            console.log(per instanceof Person);//true
            console.log(dog instanceof Person);//false
            
            
            /*
             * 所有的对象都是Object的后代,
             *     所以任何对象和Object做instanceof检查时都会返回true
             */
            console.log(dog instanceof Object);//true

        </script>

三、构造函数修改

       <script type="text/javascript">
            
            /*
             * 
             * 创建一个Person构造函数
             *     - 在Person构造函数中,为每一个对象都添加了一个sayName方法,目前我们的方法是在构造函数内部创建的,
             *         也就是构造函数每执行一次就会创建一个新的sayName方法,也就是所有实例的sayName都是唯一的。
             *         这样就导致了构造函数执行一次就会创建一个新的方法,
             *             执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的
             *             这是没有必要的,完全可以使所有的对象共享同一个方法
             * 
             */
            
            function PersonOne(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                //向对象中添加一个方法
                this.sayName = function(){
                    alert("Hello大家好,我是:"+this.name);
                }
            }
            
            //创建一个Person的实例
            var per = new PersonOne("孙悟空",18,"男");
            var per2 = new PersonOne("猪八戒",28,"男");
            per.sayName();
            per2.sayName();
            
            //------------------------------------------------------------------------------------
            
            //那怎么办呢?试着将sayName方法在全局作用域中定义
            
            function PersonTwo(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                //向对象中添加一个方法
                this.sayName = fun;
            }
            
            function fun(){
                alert("Hello大家好,我是:"+this.name);
            };
            
            //创建一个Person的实例
            var per = new PersonTwo("孙悟空",18,"男");
            var per2 = new PersonTwo("猪八戒",28,"男");
            per.sayName();
            per2.sayName();
            
            /*
             * 可是将函数定义在全局作用域,污染了全局作用域的命名空间
             *     而且定义在全局作用域中也很不安全
             */
            
            //------------------------------------------------------------------------------------
            
            //那么可以怎么改呢?向原型中添加sayName方法
            
            /**
             * 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
             *     这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
             */
            
            function PersonThree(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
            }
            //向原型中添加sayName方法
            PersonThree.prototype.sayName = function(){
                alert("Hello大家好,我是:"+this.name);
            };
            
            //创建一个Person的实例
            var per = new PersonThree("孙悟空",18,"男");
            var per2 = new PersonThree("猪八戒",28,"男");
            per.sayName();
            per2.sayName();
            
            
            
        </script>

 

posted @ 2020-05-08 20:47  Arbitrary233  阅读(119)  评论(0编辑  收藏  举报