zoukankan      html  css  js  c++  java

  • JS面向对象高级特性


    　　对象的创建方法：

    　　对象的创建可以通过两种方式，第一种通过对象初始化的方法：

    1.  var person={
    2.                 name:"xingoo",
    3.                 age:26,
    4.                 say:function(){
    5.                     console.log("say something");
    6.                 },
    7.                 action:function(){
    8.                     console.log("do something");
    9.                 }
    10.             };
    12.             console.log(person.name);
    13.             console.log(person.age);
    14.             person.say();
    15.             person.action();


    　第二种方式通过构造函数创建：


    1.   function student(name,age){
    2.                 this.name = name;
    3.                 this.age = age;
    4.                 this.say = function(){
    5.                     console.log("say something");
    6.                 }
    7.                 this.action = function(){
    8.                     console.log("do something");
    9.                 }
    10.             }
    11.             var xingoo = new student("xingoo",27);
    12.             console.log(xingoo.name);
    13.             console.log(xingoo.age);
    14.             xingoo.say();
    15.             xingoo.action();

    　　对象的属性

    　　对象的属性分为对象属性、私有属性和类属性。

    　　对象属性需要创建对象后才能使用；

    　　私有属性在内部可以直接使用，在外部需要通过闭包才能使用。

    　　类属性可以通过对象名称直接使用。

    1. function func(){
    2.                 this.objPro1 = "对象属性";
    3.                 func.prototype.objPro2 = "对象属性";
    5.                 var privatePro = "私有属性";
    6.             }
    7.             func.classPro = "类属性";
    9.             console.log(func.classPro);
    11.             var f = new func();
    12.             console.log(f.objPro1);
    13.             console.log(f.objPro2);
    15.             <!-- 私有属性可以通过闭包获取 -->

    　　对象的方法

    　　对象方法包括：对象方法，私有方法和类方法，使用类似前面的属性。

    1. function demoFunc1(){
    2.                 var privateFunc = function(){
    3.                     console.log("this is privateFunc");
    4.                 };
    6.                 privateFunc();
    8.                 this.objFunc1 = function(){
    9.                     console.log("this is objFunc1");
    10.                 };
    11.                 demoFunc1.prototype.objFunc2 = function(){
    12.                     console.log("this is objFunc2");
    13.                 };
    14.             }
    15.             demoFunc1.classFunc = function(){
    16.                 console.log("this is classFunc");
    17.             };
    18.             demoFunc1.classFunc();
    20.             var f = new demoFunc1();
    21.             f.objFunc1();
    22.             f.objFunc2();


    　　继承、封装与多态

    　　JS要想实现继承，需要通过apply方法或者prototype实现。

    　　如果单纯的使用apply方法，子类的原型是子类；如果使用prototype，那么子类的原型也将继承父类。

    　　例如下面的代码：

    1.   function Animal(name,age){
    2.                 this.name = name;
    3.                 this.age =age;
    4.                 this.say = function(){
    5.                     console.log("animal say something");
    6.                 }
    7.             }
    8.             function Cat(name,age){
    9.                 Animal.apply(this,[name,age]);
    10.             }
    11.             <!-- Cat.prototype = new Animal();-->
    13.             var cat1 = new Cat("xingoo",3);
    14.             console.log(cat1.name);
    15.             console.log(cat1.age);
    16.             cat1.say();


    　　上面代码中，cat的原型是cat；

    　　如果开启注释的部分，可以发现，cat类的原型也变成了Animal。

    　　子类的方法会覆盖父类的方法，即表现出多态性：

    1.    function Pig(name,age){
    2.                 this.say = function(){
    3.                     console.log("i am pig");
    4.                 }
    5.             }
    6.             Pig.prototype = new Animal();
    7.             function Dog(name,age){
    8.                 this.say = function(){
    9.                     console.log("i am dog");
    10.                 }
    11.             }
    12.             Dog.prototype = new Animal();
    14.             function say(animal){
    15.                 if(animal instanceof Animal){
    16.                     animal.say();
    17.                 }
    18.             }
    19.             var dog = new Dog();
    20.             var pig = new Pig();
    21.             say(dog);
    22.             say(pig);

    　　使用到的全部代码：

    1. <!doctype html>
    2. <html>
    3.     <head>
    4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5.     </head>
    6.     <body>
    7.         <script type="text/javascript">
    8.             <!-- 对象初始化器方式 -->
    9.             var person={
    10.                 name:"xingoo",
    11.                 age:26,
    12.                 say:function(){
    13.                     console.log("say something");
    14.                 },
    15.                 action:function(){
    16.                     console.log("do something");
    17.                 }
    18.             };
    20.             console.log(person.name);
    21.             console.log(person.age);
    22.             person.say();
    23.             person.action();
    25.             <!-- 构造函数方式 -->
    26.             function student(name,age){
    27.                 this.name = name;
    28.                 this.age = age;
    29.                 this.say = function(){
    30.                     console.log("say something");
    31.                 }
    32.                 this.action = function(){
    33.                     console.log("do something");
    34.                 }
    35.             }
    36.             var xingoo = new student("xingoo",27);
    37.             console.log(xingoo.name);
    38.             console.log(xingoo.age);
    39.             xingoo.say();
    40.             xingoo.action();
    42.             <!-- 对象属性 私有属性，对象属性，类属性 -->
    43.             function func(){
    44.                 this.objPro1 = "对象属性";
    45.                 func.prototype.objPro2 = "对象属性";
    47.                 var privatePro = "私有属性";
    48.             }
    49.             func.classPro = "类属性";
    51.             console.log(func.classPro);
    53.             var f = new func();
    54.             console.log(f.objPro1);
    55.             console.log(f.objPro2);
    57.             <!-- 私有属性可以通过闭包获取 -->
    59.             <!-- 私有方法，对象方法，类方法 -->
    60.             function demoFunc1(){
    61.                 var privateFunc = function(){
    62.                     console.log("this is privateFunc");
    63.                 };
    65.                 privateFunc();
    67.                 this.objFunc1 = function(){
    68.                     console.log("this is objFunc1");
    69.                 };
    70.                 demoFunc1.prototype.objFunc2 = function(){
    71.                     console.log("this is objFunc2");
    72.                 };
    73.             }
    74.             demoFunc1.classFunc = function(){
    75.                 console.log("this is classFunc");
    76.             };
    77.             demoFunc1.classFunc();
    79.             var f = new demoFunc1();
    80.             f.objFunc1();
    81.             f.objFunc2();
    83.             <!-- 封装性，继承性，多态性 -->
    84.             <!-- apply()实现属性和方法的集成，prototype实现原型的继承 -->
    86.             function Animal(name,age){
    87.                 this.name = name;
    88.                 this.age =age;
    89.                 this.say = function(){
    90.                     console.log("animal say something");
    91.                 }
    92.             }
    93.             function Cat(name,age){
    94.                 Animal.apply(this,[name,age]);
    95.             }
    96.             <!-- Cat.prototype = new Animal();-->
    98.             var cat1 = new Cat("xingoo",3);
    99.             console.log(cat1.name);
    100.             console.log(cat1.age);
    101.             cat1.say();
    103.             <!-- 继承 -->
    104.             function Pig(name,age){
    105.                 this.say = function(){
    106.                     console.log("i am pig");
    107.                 }
    108.             }
    109.             Pig.prototype = new Animal();
    110.             function Dog(name,age){
    111.                 this.say = function(){
    112.                     console.log("i am dog");
    113.                 }
    114.             }
    115.             Dog.prototype = new Animal();
    117.             function say(animal){
    118.                 if(animal instanceof Animal){
    119.                     animal.say();
    120.                 }
    121.             }
    122.             var dog = new Dog();
    123.             var pig = new Pig();
    124.             say(dog);
    125.             say(pig);
    126.         </script>
    127.     </body>
    128. </html>

    　　运行结果：


     
  • 相关阅读:
    谷歌地图移动版(Google Mobile Map)试用(附部分Latitude试用)
    WordPress to Micolog转换工具
    Edge 705试用
    报警点(电子狗)模型探究
    低调发布上海和北京地图
    如何制作一份导航电子地图(上)
    读Google2009开发者大会地图开发文档有感
    照片处理工作流(缩放+GPS信息+水印+IPTC+EXIF，软件推荐)
    浅谈导航电子地图的组成和制作流程
    我的2010世博地图1.0版发布
  • 原文地址：https://www.cnblogs.com/signheart/p/6598168.html
Copyright © 2011-2022 走看看