JavaScript面向对象的三大特性

1、JavaScript面向对象的三大特性

JavaScript的三大特性：封装性、继承性、多态性。

2、JavaScript实现封装特性

　　在一些静态类型的语言如java中,本身语法就提供了这些功能。js当中只能依靠变量的作用域来实现封装的特性,并且只能模拟出public和private两种特性。封装实现就是是对象内部的变化对外界是透明的,不可见。这种做法使对象之间低耦合,便于维护升级,团队协作开发。

3、JavaScript实现继承特性

　　继承可以解决代码复用，让编程更加靠近人类思维。当多个类存在相同的属性(变量)和方法时，可以从这些类中抽象出父类，在父类中定义这些相同的属性和方法，所有的子类不需要重新定义这些属性和方法，只需要通过继承父类中的属性和方法。
JS中实现继承的方式：

　　1、通过call或者apply实现继承

 //1.把子类中共有的属性和方法抽取出，定义一个父类Stu

 function Stu(name,age){

     //window.alert("确实被调用.");

     this.name=name;

     this.age=age;

     this.show=function(){

         window.alert(this.name+"年龄是="+this.age);

     }

 }

 //2.通过call或者apply来继承父类的属性的方法

 function MidStu(name,age){

     //这里这样理解: 通过call修改了Stu构造函数的this指向,

     //让它指向了调用者本身.

     Stu.call(this,name,age);

     //如果用apply实现，则可以

     //Stu.apply(this,[name,age]); //说明传入的参数是 数组方式

     //可以写MidStu自己的方法.

     this.pay=function(fee){

         window.alert("你的学费是"+fee*0.8);

     }

 }

 function Pupil(name,age){

     Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法

     //可以写Pupil自己的方法.

     this.pay=function(fee){

         window.alert("你的学费是"+fee*0.5);

     }

 }

 //测试

 var midstu=new MidStu("zs",15);

 var pupil=new Pupil("ls",12);

 midstu.show();

 midstu.pay(100);

 pupil.show();

 pupil.pay(100);

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

 <script type="text/javascript">

     function Animal(name,age){

         this.name=name;

         this.age=age;

         this.shout=function(){

             alert("我是："+this.name+",今年："+this.age);

         };

         this.action=function(){

             alert("会吃");

         };

     }

     function Dog(name,age){

         Animal.apply(this, [name,age]);

     }

     var jack=new Dog("jack",1);

     alert(jack.name);

     alert(jack.age);

     jack.shout();

     jack.action();

 </script>

 </body>

 </html>

　　2、原型继承方式实现继承

　　原型继承是js中最通用的继承方式，不用实例化对象，通过直接定义对象，并被其他对象引用，这样形成的一种继承关系，其中引用对象被称为原型对象。

 function A(){

     this.color = 'red';

 }

 function B(){}

 function C(){}

 B.prototype = new A();

 C.prototype = new B();

 // 测试原型继承

 var c = new C();

 console.log(c.color); // red

原型继承显得很简单，不需要每次构造都调用父类的构造函数，也不需要通过复制属性的方式就能快速实现继承。但它也存在一些缺点：

① 每个类型只有一个原型，所以不支持多重继承（即一个子类继承自多个父类）。

② 不能很好的支持多参数或动态参数的父类，显得不够灵活。

③ 占用内存多，每次继承都需要实例化一个父类，这样会存在内存占用过多的问题。

4、JavaScript实现多态特性

　　JS的函数重载
　　这个是多态的基础，JS函数不支持多态，事实上JS函数是无态的，支持任意长度，类型的参数列表。如果同时定义了多个同名函数，则以最后一个函数为准。

　　1、js不支持重载，通过判断参数的个数来模拟重载的功能。

 /*****************说明js不支持重载*****/

 function Person(){

     this.test1=function (a,b){

         window.alert('function (a,b)');

     }

     this.test1=function (a){

         window.alert('function (a)');

     }

 }

 var p1=new Person();

 //js中不支持重载.

 //但是这不会报错，js会默认是最后同名一个函数，可以看做是后面的把前面的覆盖了。

 p1.test1("a","b");

 p1.test1("a");

 //js怎么实现重载.通过判断参数的个数来实现重载

 function Person(){

     this.test1=function (){

         if(arguments.length==1){

             this.show1(arguments[0]);

         }else if(arguments.length==2){

             this.show2(arguments[0],arguments[1]);

         }else if(arguments.length==3){

             this.show3(arguments[0],arguments[1],arguments[2]);

         }

     }

     this.show1=function(a){

         window.alert("show1()被调用"+a);

     }

     this.show2=function(a,b){

         window.alert("show2()被调用"+"--"+a+"--"+b);

     }

     function show3(a,b,c){

         window.alert("show3()被调用");

     }

 }

 var p1=new Person();

 //js中不支持重载.

 p1.test1("a","b");

 p1.test1("a");

　　2、多态基本概念
　　多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成：多态是指通过指向父类的引用，来调用在不同子类中实现的方法。

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

 <script type="text/javascript">

     function Animal(){

         this.say=function(){

             alert("我是动物");

         };

     }

     function Dog(){

         this.say=function(){  //多态的实现需要重写父类对象的方法

             alert("我是狗");

         };

     }

     Dog.prototype=new Animal();//多态的实现需要原生继承

     function Cat(){

         this.say=function(){  //多态的实现需要重写父类对象的方法

             alert("我是猫");

         };

     }

     Cat.prototype=new Animal();

     function say(animal){

         if(animal instanceof Animal){

             animal.say();

         }

     }

     var dog=new Dog();

     var cat=new Cat();

     say(dog);

     say(cat);

 </script>

 </body>

 </html>

　　备注：多态利于代码的维护和扩展，当我们需要使用同一类树上的对象时，只需要传入不同的参数就行了，而不需要再new 一个对象。