zoukankan      html  css  js  c++  java

  • Javascript基于对象三大特征 -- 冒充对象

    Javascript基于对象三大特征

    基本概述

        JavaScript基于对象的三大特征和C++，Java面向对象的三大特征一样，都是封装(encapsulation)、继承(inheritance )和多态(polymorphism )。只不过实现的方式不同，其基本概念是差不多的。其实除三大特征之外，还有一个常见的特征叫做抽象(abstract)，这也就是我们在一些书上有时候会看到面向对象四大特征的原因了。

    封装性

        封装就是把抽象出来的数据和对数据的操作封装在一起，数据被保护在内部，程序的其它部分只有通过被授权的操作(成员方法)，才能对数据进行操作。

    案例：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <html>  
    2.     <head>  
    3.         <script type="text/javascript">  
    4.             function Person(name, agei, sal){  
    5.                 // 公开  
    6.                 this.name = name;  
    7.                 // 私有  
    8.                 var age = agei;  
    9.                 var salary = sal;  
    10.             }  
    11.             var p1 = new Person('zs', 20, 10000);  
    12.             window.alert(p1.name + p1.age);  
    13.         </script>  
    14.     </head>  
    15.     <body>  
    16.     </body>  
    17. </html>  

    PS：JS封装只有两种状态，一种是公开的，一种是私有的。

    通过构造函数添加成员方法和通过原型法添加成员方法的区别

    1、通过原型法分配的函数是所有对象共享的.

    2、通过原型法分配的属性是独立.(如果你不修改属性，他们是共享)

    3、建议，如果我们希望所有的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存.

    案例：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. function Person(){  
    2.     this.name="zs";  
    3.     var age=20;  
    4.     this.abc=function(){  
    5.         window.alert("abc");  
    6.     }  
    7.     function abc2(){  
    8.         window.alert("abc");  
    9.     }  
    10. }  
    11.   
    12. Person.prototype.fun1=function(){  
    13.     window.alert(this.name);//ok  
    14.     //window.alert(age);//no ok  
    15.     //abc2();//no ok  
    16.     this.abc();//ok  
    17. }  
    18. var p1=new Person();  
    19. p1.fun1();  

    特别强调：我们前面学习的通过prototype给所有的对象添加方法，但是这种方式不能去访问类的私有变量和方法。

    继承性

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

    JS中实现继承的方式

    1、对象冒充

    案例：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <html>  
    2.     <head>  
    3.         <script type="text/javascript">  
    4.             function Stu(name, age){  
    5.                 this.name = name;  
    6.                 this.age = age;  
    7.                 this.show = function(){  
    8.                     window.alert(this.name + " " + this.age);  
    9.                 }  
    10.             }  
    11.             function MidStu(name, age) {  
    12.                 this.stu = Stu;  
    13.                 // 通过对象冒充来实现继承的  
    14.                 // 对象冒充的意思就是获取那个类的所有成员，因为js是谁调用那个成员就是谁的，这样MidStu就有了Stu的成员了  
    15.                 this.stu(name, age);  
    16.                 this.payFee = function(){  
    17.                     window.alert("缴费" + money * 0.8);  
    18.                 }  
    19.             }  
    20.             function Pupil(name, age) {  
    21.                 this.stu = Stu;  
    22.                 // 通过对象冒充来实现继承的  
    23.                 this.stu(name, age);  
    24.                 this.payFee = function(){  
    25.                     window.alert("缴费" + money * 0.5);  
    26.                 }  
    27.             }  
    28.   
    29.             var midStu = new MidStu("zs", 13);  
    30.             midStu.show();  
    31.             var pupil = new Pupil("ls", 10);  
    32.             pupil.show();  
    33.         </script>  
    34.     </head>  
    35.     <body>  
    36.     </body>  
    37. </html>  
    2、通过call或者apply实现

    案例：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <html>  
    2. <head>  
    3. <script type="text/javascript">  
    4.     //1. 把子类中共有的属性和方法抽取出，定义一个父类Stu  
    5.     function Stu(name,age){  
    6.         // window.alert("确实被调用.");  
    7.         this.name=name;  
    8.         this.age=age;  
    9.         this.show=function(){  
    10.             window.alert(this.name+"年龄是="+this.age);  
    11.         }  
    12.     }  
    13.     //2.通过对象冒充来继承父类的属性的方法  
    14.     function MidStu(name,age){  
    15.         //这里这样理解: 通过call修改了Stu构造函数的this指向,  
    16.         //让它指向了调用者本身.  
    17.         Stu.call(this,name,age);  
    18.         //如果用apply实现，则可以  
    19.         //Stu.apply(this,[name,age]); //说明传入的参数是 数组方式  
    20.         //可以写MidStu自己的方法.  
    21.         this.pay=function(fee){  
    22.             window.alert("你的学费是"+fee*0.8);  
    23.         }  
    24.     }  
    25.     function Pupil(name,age){  
    26.         Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法  
    27.         //可以写Pupil自己的方法.  
    28.         this.pay=function(fee){  
    29.             window.alert("你的学费是"+fee*0.5);  
    30.         }  
    31.     }  
    32.     //测试  
    33.     var midstu=new MidStu("zs",15);  
    34.     var pupil=new Pupil("ls",12);  
    35.     midstu.show();  
    36.     midstu.pay(100);  
    37.     pupil.show();  
    38.     pupil.pay(100);  
    39. </script>  
    40. </html>  

    小结：

    1、JS对象可以通过对象冒充，实现多重继承

    2、Object类是所有Js类的基类

    多态性

    JS的函数重载

        这个是多态的基础，在之前的Javascript入门已经说过了，JS函数不支持多态，但是事实上JS函数是无态的，支持任意长度，类型的参数列表。如果同时定义了多个同名函数，则以最后一个函数为准。

    案例：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <html>  
    2. <head>  
    3. <script type="text/javascript">  
    4.     //*****************说明js不支持重载*****  
    5.     /*function Person(){  
    6.         this.test1=function (a,b){  
    7.             window.alert('function (a,b)');   
    8.         }  
    9.         this.test1=function (a){  
    10.             window.alert('function (a)');  
    11.         }  
    12.     }  
    13.     var p1=new Person();  
    14.     //js中不支持重载.  
    15.     //但是这不会报错，js会默认是最后同名一个函数，可以看做是后面的把前面的覆盖了。  
    16.     p1.test1("a","b");  
    17.     p1.test1("a");*/  
    18.       
    19.     //js怎么实现重载.通过判断参数的个数来实现重载  
    20.     function Person(){  
    21.         this.test1=function (){  
    22.             if(arguments.length==1){  
    23.                 this.show1(arguments[0]);  
    24.             }else if(arguments.length==2){  
    25.                 this.show2(arguments[0],arguments[1]);  
    26.             }else if(arguments.length==3){  
    27.                 this.show3(arguments[0],arguments[1],arguments[2]);  
    28.             }  
    29.         }  
    30.         this.show1=function(a){  
    31.             window.alert("show1()被调用"+a);  
    32.         }  
    33.         this.show2=function(a,b){  
    34.             window.alert("show2()被调用"+"--"+a+"--"+b);  
    35.         }  
    36.         function show3(a,b,c){  
    37.             window.alert("show3()被调用");  
    38.         }  
    39.     }  
    40.     var p1=new Person();  
    41.     //js中不支持重载.  
    42.     p1.test1("a","b");  
    43.     p1.test1("a");  
    44. </script>  
    45. </html>  

    多态基本概念

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

    案例：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript">  
    2.     // Master类  
    3.     function Master(name){  
    4.         this.nam=name;  
    5.         //方法[给动物喂食物]  
    6.     }  
    7.     //原型法添加成员函数  
    8.     Master.prototype.feed=function (animal,food){  
    9.         window.alert("给"+animal.name+" 喂"+ food.name);  
    10.     }  
    11.     function Food(name){  
    12.         this.name=name;  
    13.     }  
    14.     //鱼类  
    15.     function Fish(name){  
    16.         this.food=Food;  
    17.         this.food(name);  
    18.     }  
    19.     //骨头  
    20.     function Bone(name){  
    21.         this.food=Food;  
    22.         this.food(name);  
    23.     }  
    24.     function Peach(name){  
    25.         this.food=Food;  
    26.         this.food(name);  
    27.     }  
    28.     //动物类  
    29.     function Animal(name){  
    30.         this.name=name;  
    31.     }  
    32.     //猫猫  
    33.     function Cat(name){  
    34.         this.animal=Animal;  
    35.         this.animal(name);  
    36.     }  
    37.     //狗狗  
    38.     function Dog(name){  
    39.         this.animal=Animal;  
    40.         this.animal(name);  
    41.     }  
    42.     //猴子  
    43.     function Monkey(name){  
    44.         this.animal=Animal;  
    45.         this.animal(name);  
    46.     }  
    47.     var cat=new Cat("猫");  
    48.     var fish=new Fish("鱼");  
    49.   
    50.     var dog=new Dog("狗");  
    51.     var bone=new Bone("骨头");  
    52.   
    53.     var monkey=new Monkey("猴");  
    54.     var peach=new Peach("桃");  
    55.   
    56.     //创建一个主人  
    57.     var master=new Master("zs");  
    58.     master.feed(dog,bone);  
    59.     master.feed(cat,fish);  
    60.     master.feed(monkey,peach);  
    61. </script>  

    总结：

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

    ----------参考《韩顺平.轻松搞定网页设计(html+css+js)》
  • 相关阅读:
    数据库字段太多，批量快速建立实体类方法（适合大量字段建立实体类）
    SQL service 中的 ”输入SQL命令窗口“ 打开了 “属性界面” 回到 ”输入SQL命令窗口“
    计算机软件编程英语词汇集锦
    编程常用英语词汇
    svn上传和下载项目
    当启动tomcat时出现tomcat setting should be set in tomcat preference page
    Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor
    eclipse中选中一个单词 其他相同的也被选中 怎么设置
    Spring Boot的@SpringBootApplication无法引入的问题
    最全的SpringCloud视频教程
  • 原文地址：https://www.cnblogs.com/GotoJava/p/6572758.html
Copyright © 2011-2022 走看看