JS面向对象基础篇（封装 继承 多态）

首先我们要创建一个对象，我们可以利用javascript的语法特征，以类的思想来创建对象

一:封装

（1）原始方法，代码如下

<script>   var obj=new Object();   obj.name='Tom'; //给对象添加属性   obj.sex=22;   obj.showName=function(){    //给对象添加方法    alert(this.name);}    obj.showAge=function(){    alert(this.age);}    obj.showName();   //'Tom'   obj.showAge();   //22//上面的方式通过new关键字生成一个对象，然后根据javascript是动态语言的特性来添加属性和方法，构造一个对象。其中this表示调用该方法的对象。这种方式的问题是如果需要多次创建对象，那么需要重复代码多次，不利于代码的复用。</script>

（2）工厂加工， 代码如下

<script>   function createObj(name,age){      var Obj=new Object();      obj.name=name;      obj.age=age;      obj.showName=function(){         alert(this.name);  }      obj.showAge=function(){         alert(this.age);    }      return obj;}   var obj1=createObj('sun',22);   var obj2=createObj('leo',21);   obj1.showName();  //sun   obj1.showAge();    //22   obj2.showName();  //leo   obj2.showAge();    //21   //上面通过定义几个函数的对象，解决了不同对象持有函数对象的私有属性问题。现在所有对象的方法都持有上面两个函数的引用，但这么一来，对象的函数又和   对象相互独立了，这和面向对象中持有方法属于与特定类的思想不符。</script>

（3）构造函数方式， 代码如下

   <script>      function person(name,age){      //var this=new Object();  //系统模拟创建对象      this.name=name;      this.age=age;      this.showName=function(){         alert(this.name);     }      this.showAge=function(){         alert(this.age);     }    //return this    //系统模拟返回了对象    }   var obj1=new person('sun',22);   var obj2=new person('leo',21);   obj1.showName();  //sun   obj1.showAge();    //22   obj2.showName();  //leo   obj2.showAge();    //21   //构造函数的方式与工厂加工方式一样，会为每个对象创建独享的函数对象，当然也可以将这些函数对象定义在构造函数外面，这样又有了对象和方法     相互独立的问题   </script>

（4）原型方法， 代码如下

   <script>        function person(){}  //定义一个空构造函数，且不能传递参数       person.prototype.age=22;       person.prototype.array=['sun','leo'];       person.prototype.showAge=function(){           alert(this.age);}       person.prototype.showArray=function(){           alert(this.array);}       var obj1=new person();  //生成一个person对象       var obj2=new person();       obj1.array.push('blue');  //向obj1的array属性添加一个属性       obj1.showArray（）; //'sun','leo','blue'       obj2.showArray（）; //'sun','leo','blue'    //上面的代码通过obj1向obj1的属性array添加元素时，obj2的array属性的元素也跟着受影响，原因是在于obj1和obj2对象的array属性引用的是同一个Array     对象，那么改变这个Array对象，另一个引用Array对象的属性自然也会受到影响  </script>

（5）混合的构造函数/原型方式， 代码如下

    <script>       function person(name,age){        this.name=name;        this.age=age;}             person.prototype.showName=function(){        alert(this.name);}       person.prototype.showAge=function(){        alert(this.age);}       var obj1= new person('sun',22);       var obj2= new person('leo',21);       obj1.showName();  //sun       obj1.showAge();    //22       obj2.showName();  //leo       obj2.showAge();    //21    //属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。    </script>

二:继承（主要包括属性的继承和方法的继承）

代码如下

   <script>              function person(name, sex){        this.name=name;        this.sex=sex;}     person.prototype.showName=function(){           alert(this.name);}     person.prototype.showSex=function(){          alert(this.sex);}   ////////////////////////////////////////////////////     function worker(name,sex,job){        person.call(this,name,sex);//构造函数伪装   调用父级的构造函数--为了继承属性        this.job=job;}     //原型链  通过原型来继承父级的方法     for(attr in person.prototype){       worker.prototype[attr]=person.prototype[attr];}     worker.prototype.showJob=function(){         alert(this.job); }      var op=new person('blue','男');        var ow=new worker('blue','男','程序员');      op.showName();  //blue      op.showSex();  //男      ow.showName();  //blue      ow.showsex();  //男      ow.showjob();  //程序员    //继承的好处：父类新加的功能，子类也具备该功能，子类新加的功能不会影响父类的功能   </script>

转载自：http://www.jianshu.com/p/a66f1ce2145a