• 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>
  • 相关阅读:
    mac/unix系统:C++实现一个端口扫描器
    C++:通过gethostbyname函数,根据服务器的域名,获取服务器IP
    PostMan Setting Proxy 设置 代理
    企业架构 Red Hat Drools KIE Project 三大核心产品
    IDS,IPS,IPD
    Vehicle routing with Optaplanner graph-theory
    SonarQube Detection of Injection Flaws in Java, C#, PHP
    Spring AOP Log
    Code Quality and Security | SonarQube
    Gradle vs. Maven: Performance, Compatibility, Speed, & Builds
  • 原文地址:https://www.cnblogs.com/lyh233/p/12852943.html
Copyright © 2020-2023  润新知