Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der JavaScript-Objekterstellung, Funktionskapselung und Attributcodebeispiele

伊谢尔伦
Freigeben: 2017-07-24 14:57:32
Original
1957 Leute haben es durchsucht

Erstellen von Objekten

Lassen Sie uns zunächst die objektorientierte Programmierung (OOP) verstehen, die wir häufig verwenden müssen Es gibt viele Codemodule, jedes Modul bietet spezifische Funktionen, jedes Modul ist isoliert oder sogar völlig unabhängig von anderen Modulen. Dieser modulare Programmieransatz bietet große Vielfalt und erhöht die Möglichkeiten zur Code-Wiederverwendung erheblich. Um dieses Problem weiter zu veranschaulichen, stellen Sie sich eine Hochleistungsanwendung auf Ihrem Computer vor, bei der es sich um einen erstklassigen Rennwagen handelt. Mit herkömmlichen Programmiertechniken wäre das Auto eine Einheit. Wenn Sie das Auto verbessern möchten, müssen Sie die gesamte Einheit austauschen, es an den Hersteller zurückschicken, es von einem Kfz-Experten aufrüsten lassen oder ein neues Auto kaufen. Wenn Sie die OOP-Technologie verwenden, müssen Sie nur einen neuen Motor beim Hersteller kaufen und ihn gemäß den Anweisungen selbst austauschen, anstatt die Karosserie mit einer Bügelsäge zu zerschneiden. Die meisten Argumente sind jedoch, dass JavaScript keine direkte objektorientierte Sprache ist, sondern durch Simulation viele Dinge tun kann, die nur objektorientierte Sprachen können, wie z. B. Vererbung, Polymorphismus und Kapselung (Es gibt nichts, was es nicht kann, ich kann es mir einfach nicht vorstellen)

//以下三种构造对象的方法 
//new Object,实例化一个Object 
var a=new Object(); 
a.x=1,a.y=2; 
//对象直接量 
var b={x:1,y:2}; 
//定义类型 
function Point(x,y){ //类似于C#中的类 
this.x=x; 
this.y=y; 
} 
var p=new Point(1,2); //实例化类
Nach dem Login kopieren

Die erste Methode wird durch die Konstruktion eines Basisobjekts und das direkte Hinzufügen von Attributen erreicht. Die zweite Methode ähnelt der ersten Methode und kann als Abkürzungsnotation der ersten Methode angesehen werden. Sie können mehrere Objekte desselben Typs basierend auf „Klassen“ erstellen

Kapselung von Objektattributen (öffentlich und privat)
Illustriert mit Beispielen
function List(){
var m_elements=[]; //Auf private Mitglieder kann nicht außerhalb des Objekts zugegriffen werden, wird m_elements zu einer globalen Variablen , sodass von außen direkt darauf zugegriffen werden kann, zum Beispiel Alert(m_elements[0])

m_elements=Array.apply(m_elements,arguments); 
//此处模拟getter,使用时alist.length; 
//等价于getName()方式:this.length=function(){return m_elements.length;},使用时 
alist.length(); 
//公有属性,可以通过"."运算符或下标来访问 
this.length={ 
valueOf:function(){ 
return m_elements.length; 
}, 
toString:function(){ 
return m_elements.length; 
} 
} 
//公有方法,此方法使用得alert(alist)相当于alert(alist.toString()) 
this.toString=function(){ 
return m_elements.toString(); 
} 
//公有方法 
this.add=function(){ 
m_elements.push.apply(m_elements,arguments); 
} 
//私有方法如下形式,这里涉及到了闭包的概念,接下来继续说明 
//var add=function()或function add() 
//{ 
//m_elements.push.apply(m_elements,arguments); 
//} 
} 
var alist=new List(1,2,3); 
dwn(alist); //=alert(alist.toString()),输出1,2,3 
dwn(alist.length); //输出3 
alist.add(4,5,6); 
dwn(alist); //输出1,2,3,4,5,6 
dwn(alist.length); //输出6
Nach dem Login kopieren

Typen von Eigenschaften und Methoden
In JavaScript die Eigenschaften und Methoden von Objekten unterstützen 4 verschiedene Typen: private Eigenschaft (private Eigenschaften), dynamische öffentliche Eigenschaft (dynamische öffentliche Eigenschaften), statische öffentliche Eigenschaft/Prototyp-Eigenschaft (statische öffentliche Eigenschaften oder Prototyp-Eigenschaften), statische Eigenschaft (statische Eigenschaften oder Klasseneigenschaften). Private Eigenschaften sind für die Außenwelt völlig unzugänglich und können über interne Getter und Setter aufgerufen werden (auf beide Simulationen kann von der Außenwelt zugegriffen werden), und jede Objektinstanz enthält eine Kopie und hat keinen Einfluss auf die anderen Prototypeigenschaften Von jeder Objektinstanz wird eine eindeutige Kopie gemeinsam genutzt; Klassenattribute werden nicht als Attribute der Instanz, sondern nur als Attribute der Klasse behandelt.
Das Folgende sind Beispiele:

//动态公有类型,静态公有类型(原型属性) 
function myClass(){ 
var p=100; //private property 
this.x=10; //dynamic public property 
} 
myClass.prototype.y=20; //static public property or prototype property,动态为myClass的原型添 
加了属性,将作用于所有实例化了的对象,注意这里用到了prototype,这是一个非常有用的东东 
//要想成为高级javascript阶段,prototype和闭包必须得理解和适当应用 
myClass.z=30; //static property 
var a=new myClass(); 
dwn(a.p) //undefined 
dwn(a.x) //10 
dwn(a.y) //20 
a.x=20; 
a.y=40; 
dwn(a.x); //20 
dwn(a.y); //40 
delete(a.x); //删除对象a的属性x 
delete(a.y); //删除对象a的属性y 
dwn(a.x); //undefined 
dwn(a.y); //20 静态公有属性y被删除后还原为原型属性y 
dwn(a.z); //undefined 类属性无法通过对象访问 
dwn(myClass.z);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der JavaScript-Objekterstellung, Funktionskapselung und Attributcodebeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage