Maison > Article > interface Web > Javascript s'appuie sur les trois caractéristiques majeures des objets (encapsulation, héritage, polymorphisme)_compétences javascript

Javascript s'appuie sur les trois caractéristiques majeures des objets (encapsulation, héritage, polymorphisme)_compétences javascript

WBOYoriginal: 2016-05-16 15:22:091611parcourir

Les trois principales caractéristiques orientées objet de Javascript sont les mêmes que les trois principales caractéristiques orientées objet de C et Java, à savoir l'encapsulation, l'héritage et le polymorphisme. C'est juste que les méthodes de mise en œuvre sont différentes, mais le concept de base est presque le même. En fait, en plus des trois caractéristiques majeures, il existe une autre caractéristique commune appelée abstraite, c'est pourquoi on voit parfois les quatre caractéristiques majeures de l'orienté objet dans certains livres.
1. Encapsulation
L'encapsulation consiste à encapsuler des données abstraites et des opérations sur les données. Les données sont protégées en interne. Les autres parties du programme ne peuvent opérer sur les données que par le biais d'opérations autorisées (méthodes membres).
Cas :

<html> 
  <head> 
    <script type="text/javascript"> 
      function Person(name, agei, sal){ 
        // 公开 
        this.name = name; 
        // 私有 
        var age = agei; 
        var salary = sal; 
      } 
      var p1 = new Person('zs', 20, 10000); 
      window.alert(p1.name + p1.age); 
    </script> 
  </head> 
  <body> 
  </body> 
</html>

PS : l'encapsulation JS n'a que deux états, l'un est public et l'autre est privé.

La différence entre l'ajout de méthodes membres via des constructeurs et l'ajout de méthodes membres via des méthodes prototypes
1. Les fonctions allouées via la méthode prototype sont partagées par tous les objets.
2. Les attributs attribués via la méthode prototype sont indépendants (Si vous ne modifiez pas les attributs, ils sont partagés)
3. Il est recommandé que si nous voulons que tous les objets utilisent la même fonction, il est préférable d'utiliser la méthode prototype pour ajouter la fonction, ce qui économise de la mémoire.

Cas :

function Person(){
  this.name="zs";
  var age=20;
  this.abc=function(){
    window.alert("abc");
  }
  function abc2(){
    window.alert("abc");
  }
}
Person.prototype.fun1=function(){
  window.alert(this.name);//ok
  //window.alert(age);//no ok
  //abc2();//no ok
  this.abc();//ok
}
var p1=new Person();
p1.fun1();

Emphase particulière : nous avons appris plus tôt à ajouter des méthodes à tous les objets via un prototype, mais cette méthode ne peut pas accéder aux variables privées et aux méthodes de la classe.

2. Héritage
L'héritage peut résoudre la réutilisation du code et rendre la programmation plus proche de la pensée humaine. Lorsque plusieurs classes ont les mêmes attributs (variables) et méthodes, vous pouvez extraire la classe parent de ces classes et définir ces mêmes attributs et méthodes dans la classe parent. Toutes les sous-classes n'ont pas besoin de redéfinir ces attributs et méthodes. et les méthodes de la classe parent.
Comment implémenter l'héritage en JS
1. Usurpation d'identité d'objet
Cas :

<html> 
  <head> 
    <script type="text/javascript"> 
      function Stu(name, age){ 
        this.name = name; 
        this.age = age; 
        this.show = function(){ 
          window.alert(this.name + " " + this.age); 
        } 
      } 
      function MidStu(name, age) { 
        this.stu = Stu; 
        // 通过对象冒充来实现继承的 
        // 对象冒充的意思就是获取那个类的所有成员，因为js是谁调用那个成员就是谁的，这样MidStu就有了Stu的成员了 
        this.stu(name, age); 
        this.payFee = function(){ 
          window.alert("缴费" + money * 0.8); 
        } 
      } 
      function Pupil(name, age) { 
        this.stu = Stu; 
        // 通过对象冒充来实现继承的 
        this.stu(name, age); 
        this.payFee = function(){ 
          window.alert("缴费" + money * 0.5); 
        } 
      } 
 
      var midStu = new MidStu("zs", 13); 
      midStu.show(); 
      var pupil = new Pupil("ls", 10); 
      pupil.show(); 
    </script> 
  </head> 
  <body> 
  </body> 
</html>

2. Par appel ou postuler
Cas :

<html> 
<head> 
<script type="text/javascript"> 
  //1. 把子类中共有的属性和方法抽取出，定义一个父类Stu 
  function Stu(name,age){ 
    // window.alert("确实被调用."); 
    this.name=name; 
    this.age=age; 
    this.show=function(){ 
      window.alert(this.name+"年龄是="+this.age); 
    } 
  } 
  //2.通过对象冒充来继承父类的属性的方法 
  function MidStu(name,age){ 
    //这里这样理解: 通过call修改了Stu构造函数的this指向, 
    //让它指向了调用者本身. 
    Stu.call(this,name,age); 
    //如果用apply实现，则可以 
    //Stu.apply(this,[name,age]); //说明传入的参数是 数组方式 
    //可以写MidStu自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的学费是"+fee*0.8); 
    } 
  } 
  function Pupil(name,age){ 
    Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法 
    //可以写Pupil自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的学费是"+fee*0.5); 
    } 
  } 
  //测试 
  var midstu=new MidStu("zs",15); 
  var pupil=new Pupil("ls",12); 
  midstu.show(); 
  midstu.pay(100); 
  pupil.show(); 
  pupil.pay(100); 
</script> 
</html>

Résumé :
1. Les objets JS peuvent être usurpés via des objets pour obtenir un héritage multiple
2. La classe Object est la classe de base de toutes les classes Js

3. Polymorphisme
Surcharge de fonction JS
C'est la base du polymorphisme. Comme mentionné dans l'introduction précédente de Javascript, les fonctions JS ne prennent pas en charge le polymorphisme, mais en fait, les fonctions JS sont sans état et prennent en charge des listes de paramètres de n'importe quelle longueur et type. Si plusieurs fonctions portant le même nom sont définies en même temps, la dernière fonction prévaudra.
Cas :

<html> 
<head> 
<script type="text/javascript"> 
  //*****************说明js不支持重载***** 
  /*function Person(){ 
    this.test1=function (a,b){ 
      window.alert('function (a,b)');  
    } 
    this.test1=function (a){ 
      window.alert('function (a)'); 
    } 
  } 
  var p1=new Person(); 
  //js中不支持重载. 
  //但是这不会报错，js会默认是最后同名一个函数，可以看做是后面的把前面的覆盖了。 
  p1.test1("a","b"); 
  p1.test1("a");*/ 
   
  //js怎么实现重载.通过判断参数的个数来实现重载 
  function Person(){ 
    this.test1=function (){ 
      if(arguments.length==1){ 
        this.show1(arguments[0]); 
      }else if(arguments.length==2){ 
        this.show2(arguments[0],arguments[1]); 
      }else if(arguments.length==3){ 
        this.show3(arguments[0],arguments[1],arguments[2]); 
      } 
    } 
    this.show1=function(a){ 
      window.alert("show1()被调用"+a); 
    } 
    this.show2=function(a,b){ 
      window.alert("show2()被调用"+"--"+a+"--"+b); 
    } 
    function show3(a,b,c){ 
      window.alert("show3()被调用"); 
    } 
  } 
  var p1=new Person(); 
  //js中不支持重载. 
  p1.test1("a","b"); 
  p1.test1("a"); 
</script> 
</html>

1. Concepts de base du polymorphisme
Le polymorphisme fait référence aux multiples états d'une référence (type) dans différentes circonstances. Cela peut également être compris comme suit : Le polymorphisme fait référence à l'appel de méthodes implémentées dans différentes sous-classes via des références pointant vers la classe parent.
Cas :

<script type="text/javascript"> 
  // Master类 
  function Master(name){ 
    this.nam=name; 
    //方法[给动物喂食物] 
  } 
  //原型法添加成员函数 
  Master.prototype.feed=function (animal,food){ 
    window.alert("给"+animal.name+" 喂"+ food.name); 
  } 
  function Food(name){ 
    this.name=name; 
  } 
  //鱼类 
  function Fish(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //骨头 
  function Bone(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  function Peach(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //动物类 
  function Animal(name){ 
    this.name=name; 
  } 
  //猫猫 
  function Cat(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //狗狗 
  function Dog(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //猴子 
  function Monkey(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  var cat=new Cat("猫"); 
  var fish=new Fish("鱼"); 
 
  var dog=new Dog("狗"); 
  var bone=new Bone("骨头"); 
 
  var monkey=new Monkey("猴"); 
  var peach=new Peach("桃"); 
 
  //创建一个主人 
  var master=new Master("zs"); 
  master.feed(dog,bone); 
  master.feed(cat,fish); 
  master.feed(monkey,peach); 
</script>

Le polymorphisme est propice à la maintenance et à l'expansion du code. Lorsque nous devons utiliser des objets sur le même type d'arbre, il suffit de passer des paramètres différents sans avoir besoin de créer un nouvel objet.

Ce qui précède sont les trois caractéristiques majeures du Javascript basé sur les objets. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Complément de plug-in de saisie semi-automatique jQuery avec le code source download_jqueryArticle suivant：Complément de plug-in de saisie semi-automatique jQuery avec le code source download_jquery

Articles Liés

Voir plus