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>