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>

　　运行结果：


 

posted on 2017-03-22 09:29  signheart  阅读(724)  评论(0)  编辑  收藏  举报

导航