suchen

Heim >Web-Frontend >js-Tutorial >Javascript basiert auf den drei Hauptmerkmalen von Objekten (Kapselung, Vererbung, Polymorphismus)_Javascript-Fähigkeiten

Javascript basiert auf den drei Hauptmerkmalen von Objekten (Kapselung, Vererbung, Polymorphismus)_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:22:091746Durchsuche

Die drei wichtigsten objektbasierten Merkmale von Javascript sind dieselben wie die drei wichtigsten objektorientierten Merkmale von C und Java, nämlich Kapselung, Vererbung und Polymorphismus. Die Implementierungsmethoden sind lediglich unterschiedlich, aber das Grundkonzept ist fast dasselbe. Tatsächlich gibt es zusätzlich zu den drei Hauptmerkmalen ein weiteres gemeinsames Merkmal namens Abstraktion, weshalb wir in einigen Büchern manchmal die vier Hauptmerkmale der Objektorientierung sehen.
1. Kapselung
 Bei der Kapselung werden abstrahierte Daten und Operationen auf den Daten gekapselt. Andere Teile des Programms können die Daten nur durch autorisierte Operationen (Mitgliedsmethoden) bearbeiten.
Fall: 

<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: Die JS-Kapselung hat nur zwei Zustände, einen ist öffentlich und der andere ist privat.

Der Unterschied zwischen dem Hinzufügen von Mitgliedsmethoden durch Konstruktoren und dem Hinzufügen von Mitgliedsmethoden durch Prototypmethoden
1. Durch die Prototyp-Methode zugewiesene Funktionen werden von allen Objekten gemeinsam genutzt.
2. Die durch die Prototypenmethode zugewiesenen Attribute sind unabhängig (Wenn Sie die Attribute nicht ändern, werden sie gemeinsam genutzt)
3. Wenn wir möchten, dass alle Objekte dieselbe Funktion verwenden, wird empfohlen, die Funktion am besten mit der Prototyp-Methode hinzuzufügen, wodurch Speicher gespart wird.

Fall: 

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();

Besonderer Schwerpunkt: Wir haben zuvor gelernt, allen Objekten Methoden über den Prototyp hinzuzufügen, aber diese Methode kann nicht auf private Variablen und Methoden der Klasse zugreifen.

2. Vererbung
Vererbung kann die Wiederverwendung von Code lösen und die Programmierung näher an das menschliche Denken heranführen. Wenn mehrere Klassen dieselben Attribute (Variablen) und Methoden haben, können Sie die übergeordnete Klasse von diesen Klassen abstrahieren und dieselben Attribute und Methoden in der übergeordneten Klasse definieren. Alle Unterklassen müssen diese Attribute und Methoden einfach erben und Methoden aus der übergeordneten Klasse.
So implementieren Sie die Vererbung in JS
1. Objektidentitätswechsel
Fall: 

<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. Durch Anruf oder Bewerbung
Fall: 

<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>

Zusammenfassung:
1. JS-Objekte können durch Objekte verkörpert werden, um eine Mehrfachvererbung zu erreichen
2. Die Object-Klasse ist die Basisklasse aller Js-Klassen

3. Polymorphismus
JS-Funktionsüberladung
Dies ist die Grundlage des Polymorphismus. Wie in der vorherigen Einführung in Javascript erwähnt, unterstützen JS-Funktionen keinen Polymorphismus, aber tatsächlich sind JS-Funktionen zustandslos und unterstützen Parameterlisten beliebiger Länge und Art. Wenn mehrere Funktionen mit demselben Namen gleichzeitig definiert sind, hat die letzte Funktion Vorrang.
Fall: 

<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. Grundkonzepte des Polymorphismus
Polymorphismus bezieht sich auf die mehreren Zustände einer Referenz (eines Typs) unter verschiedenen Umständen. Es kann auch wie folgt verstanden werden: Polymorphismus bezieht sich auf den Aufruf von Methoden, die in verschiedenen Unterklassen durch Referenzen implementiert werden, die auf die übergeordnete Klasse verweisen.
Fall: 

<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>

Polymorphismus ist förderlich für die Codepflege und -erweiterung. Wenn wir Objekte auf demselben Baumtyp verwenden müssen, müssen wir nur unterschiedliche Parameter übergeben, ohne ein neues Objekt erstellen zu müssen.

Die oben genannten sind die drei Hauptmerkmale von Javascript, das auf Objekten basiert. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Autovervollständigungs-Plug-in-Vervollständiger mit Quellcode download_jqueryNächster Artikel：jQuery-Autovervollständigungs-Plug-in-Vervollständiger mit Quellcode download_jquery

In Verbindung stehende Artikel

Mehr sehen