JavaScript面向对象实现

JavaScript面向对象实现

一：面向对象三大特征

继承，封装，多态！

二：JavaScript自定义对象

创建对象的方式：

方式1，对象初始化器方式；

 1 <script type="text/javascript">
 2 var marry={
 3 name:"marry",
 4 age:2,
 5 getMarry:function (){
 6 alert("我是"+this.name+"今年"+this.age+"岁了！");
 7 },
 8 action:function(){
 9 alert("哈哈哈");
10 }
11 };
12 alert(marry.name);
13 alert(marry.age);
14 marry.getMarry();
15 marry.action();
16 </script>

方式2，构造函数方式；

 1 <script type="text/javascript">
 2     function Dog(name,age){
 3         this.name=name;
 4         this.age=age;
 5         this.getDog=function(){
 6             alert("我是"+this.name+"今年"+this.age+"岁了！");
 7             };    
 8         this.action=function(){
 9             alert("会跑，会跳！");
10         };
11     };
12     var dog=new Dog("二狗",1);
13     alert(dog.name);
14     alert(dog.age);
15     dog.getDog();
16     dog.action();
17 </script>

对象属性定义：

私有属性；对象属性；类属性；

 1 <script type="text/javascript">
 2     function C(){
 3         this.objPro="对象属性";
 4         C.prototype.objPro2="对象属性2";
 5         var pro="私有属性";
 6         function fun2(){
 7             alert(pro);
 8         };
 9         return fun2();
10         
11     }
12     C.classpro="类属性";
13     var c=new C();
14     alert(c.objPro);
15     alert(c.objPro2);
16     alert(C.classpro);
17     var result=C;
18     result(); 
19     </script>

对象方法定义：私有方法；实例方法；类方法；

 1 <script type="text/javascript">
 2     function C(){
 3         var privateFunc=function(){
 4             alert("私有方法！");
 5         };
 6         privateFunc();
 7         this.func=function(){
 8             alert("对象方法1");
 9         };
10         C.prototype.func2=function(){
11             alert("对象方法2");
12         }
13     }
14     C.classFunc=function(){
15         alert("类方法！");
16     }
17     C.classFunc();
18     var c=new C();
19     c.func();
20     c.func2();
21     </script>

三：JavaScript实现封装特性

四：JavaScript实现继承特性

Apply()实现属性和方法的继承；

 1 <script type="text/javascript">
 2     function Animal(name,age){
 3         this.name=name;
 4         this.age=age;
 5         this.func=function(){
 6             alert("我是"+this.name+"今年"+this.age+"岁了！");
 7         };
 8         this.action=function(){
 9             alert("跳，跑！");
10         }
11     }
12     function Dog(name,age){
13         Animal.apply(this, [name,age]);
14     }
15     var dog=new Dog("二狗",3);
16     alert(dog.name);
17     alert(dog.age);
18     dog.func();
19     dog.action();
20     </script>

Prototype实现原型的继承；

 1 <script type="text/javascript">
 2     function Animal(name,age){
 3         this.name=name;
 4         this.age=age;
 5         this.func=function(){
 6             alert("我是"+this.name+"今年"+this.age+"岁了！");
 7         };
 8         this.action=function(){
 9             alert("跳，跑！");
10         }
11     }
12     function Dog(name,age){
13         Animal.apply(this, [name,age]);
14     }
15     Dog.prototype=new Animal();
16     var dog=new Dog("二狗",3);
17     alert(dog.name);
18     alert(dog.age);
19     dog.func();
20     dog.action();
21     </script>

五：JavaScript实现多态特性

JavaScript模拟多态实现！

 1 <script type="text/javascript">
 2     function Animal(){
 3         this.say=function(){
 4             alert("我是动物");
 5         };
 6     }
 7     function Dog(){
 8         this.say=function(){
 9             alert("我是狗");
10         };
11     }
12     function Cat(){
13         this.say=function(){
14             alert("我是猫");
15         };
16     }
17     Dog.prototype=new Animal();
18     Cat.prototype=new Animal();
19     function say(animal){
20         if(animal instanceof Animal){
21             animal.say();
22         }
23     } 
24     var dog=new Dog();
25     var cat=new Cat();
26     dog.say();
27     cat.say();
28     </script>