zoukankan      html  css  js  c++  java
  • javascript面向对象

    对象的创建以及常用操作

       下面的都是创建对象比较简单直观,也是JavaScript种创建对象最基本的方法,如果要创建多个对象,就会出现很多相同的代码

      1:使用new运算符(不推荐)

        var user = new Object();     //使用new运算符创建一个对象

            user.name = "Jack";       //给对象添加属性

            user.age = 25;

            user.address = "四川成都";

       2:对象字面量(JSON方式)

                  var user = {
                            name:'Jack',
                       age:25,
                       address:'四川成都'    
               };  

            3:简单方式(传统赋值方式)

            var user = {};

          user.name = 'Jack';        //给对象添加属性

            user.age = 25;
                      user.address = '四川成都';

        4:属性的调用(对于对象属性的调用有两种方式)

        (1):alert(user.name + " " +user.age);

          (2):alert(user['name'] + " " +user['age']);

        5:添加方法

           var user = {
                          name:'Jack',            //给对象添加属性
                          age:25,
                          address:'四川成都',
                          showInfo:function(){    //添加一个方法
                                alert(this.name+" "+this.age+" "+this.address);
                          },
                          showHello:showHello  //将对象外部的方法添加到对象
                       };
                     
      function showHello(){
                                alert("Hello!");    
                   }
                    user.showInfo();//调用方法
                  user.showHello();  


      工厂模式

        例: function create(name, age) {
                var obj = new Object(); 
                obj.name = name; 
                obj.age = age;
                obj.show = function () {
                  return this.name +' '+ this.age;
              };
                  return obj;
            }
            var obj1= create('jack', 30);    //第一个实例
            var obj2= create('Tom', 20);    //第二个实例
            alert(obj1.show());
            alert(obj2.show());    

         优点:解决了实例化时代码大量重复的问题

          缺点:识别问题,它们根本无法弄清楚他们到底是哪个对象的实例

         比如:

             alert(typeof obj1);  //Object
               alert(obj1 instanceof Object);  //true

      

      构造函数(构造方法)

        例: function User(name, age) {    //构造函数模式
                 this.name = name;
                this.age = age;
                this.show = function () {
                   return this.name  + ' '+this.age;
              };
            }  

           var user1 = new User('jack', 30);    //第一个实例
            var user2 = new User('Tom', 20);    //第二个实例

          优点:解决了重复实例化的问题,又解决了对象识别的问题

          缺点:每个方法都要在实例上重新创建一次


    Prototype原型模式

      通过构造函数的弊端引出原型概念

         为了讲清楚原型,我们还是必须先回顾一下构造函数的问题,用一个简单的例子再次讲解一下,我们有一只猫的构造函数,如下:

        例:

               function Cat(name,color){
                    this.name = name;
                    this.color = color;
                }

          那么现在再为这个函数添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,Cat就变成了下面这样:  

         例:

         function Cat(name,color){
                this.name = name;
                this.color = color;
                this.type = "猫科动物";
                this.eat = function(){alert("吃老鼠");};
            }

          var cat1 = new Cat("大毛","黄色");
            var cat2 = new Cat ("二毛","黑色");
            alert(cat1.type);           // 猫科动物
            cat1.eat();             // 吃老鼠  

         alert(cat1.eat == cat2.eat);     //false 

        表面上看上面的例子好像是没有什么问题,但是实际上这样做,有一个很大的弊端。那就是type属性eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容多占用一些内存。这样既不环保,也缺乏效率

        因此,为了让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址,引出了原型

    原型:(prototype和constructor是原型最基本的概念)

        原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别。可以包含特定类型的所有实例的共享属性或者方法。 这个prototype的属性值是一个对象(属性的集合),默认的只有一个叫做constructor的属性,指向这个函数本

      比如我们简单定义一个SuperType名字的函数,里面什么属性也没有在函数内部也没有

      例:

         function SuperType(){
            }

    从下图我们看到,函数里面虽然什么都没有,但是有一个默认的prototype属性,它是一个对象,它指向的是自己的地址,而prototype这个对象本身里面又有一个属性constructor,而这个属性,又指向了函数本身,有点绕

     

      你可以通过下面的代码做一下测试,看看效果

        例:

         alert(SuperType.prototype)         //object
                   alert(SuperType.prototype.constructor)   //弹出函数本身function SuperType(){} 

  • 相关阅读:
    fiddler修改请求和返回
    解决springboot在mac电脑下启动过慢的问题
    mysql中的联合查询(内联、左联、外联、右联、全联)
    servlet防止表单重复提交
    spring开发中常见错误集合,逐步添加
    spring4整合hibernate5以及出现的问题解决办法
    利用maven构建一个spring mvc的helloworld实例
    Hibernate5 入门之SessionFactory对象的创建
    OGNL表达式入门
    Template模版
  • 原文地址:https://www.cnblogs.com/zouxueling/p/4104379.html
Copyright © 2011-2022 走看看