首页 > 代码库 > javascript面向对象

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(){} 

 

javascript面向对象