zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    PythonStudy——数据类型总结 Data type summary
    PythonStudy——可变与不可变 Variable and immutable
    PythonStudy——列表操作 List operatio
    PythonStudy——列表的常用操作 List of common operations
    PythonStudy——列表类型 List type
    PythonStudy——字符串扩展方法 String extension method
    PythonStudy——字符串重要方法 String important method
    AWT,Swing,RCP 开发
    JQuery插件机制
    最新知识网站
  • 原文地址:https://www.cnblogs.com/lyh233/p/12852943.html
Copyright © 2011-2022 走看看