Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Javascript-Definitionsklassen und Implementierungsbeispiele der Klassen_Javascript-Fähigkeiten

Detaillierte Erläuterung der Javascript-Definitionsklassen und Implementierungsbeispiele der Klassen_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:28:29
Original
1021 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die Implementierung von Javascript-Definitionsklassen und -Klassen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In letzter Zeit frage ich oft in mehreren Gruppen, wie eine Funktion in einer Klasse diese Methode aufruft, die nach der Definition verfügbar gemacht wird. Jetzt habe ich einen Aufsatz über die Klassenimplementierung.

Lassen Sie uns zunächst über Klassen sprechen. In einer Klasse werden wir die folgenden Merkmale haben:

1. Öffentliche Methoden
2. Private Methoden
3. Attribute
4. Private Variablen
5. Destruktor

Schauen wir uns direkt ein Beispiel an:

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
}

Nach dem Login kopieren

Ich habe alle Notizen hier niedergeschrieben, damit wahrscheinlich jeder sie auf einen Blick verstehen kann. Für Freunde, die selten JS schreiben, fragen Sie sich vielleicht, warum ich eine _self-Variable definiere, da diese in JS nicht in anderen Objektsprachen verwendet werden muss und sich während der Analyse- und Ausführungsprozesse ändert. Hier werde ich kurz auf die Definition in js eingehen. Bei Bedarf kann ich mehr schreiben.

Definition: Dies ist das Objekt, zu dem die Funktion, die es enthält, gehört, wenn es als Methode aufgerufen wird.
Features: Die Umgebung kann sich ändern, da die Funktion verschiedenen Objekten zugewiesen wird!

Interessierte Freunde können online nach Informationen suchen, um mehr zu erfahren. Zurück zum Thema: Der Zweck von _self besteht darin, eine zusätzliche private Variable zu öffnen und den Verweis direkt auf die Klasse selbst zu verweisen.

Ich habe gerade ein Destruktorproblem erwähnt, das direkt mithilfe von Code implementiert werden kann. Schreiben Sie einfach den Ausführungscode direkt am Ende der Funktion.

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
  /***析构函数***/
  var init = function(){
    privateMethod();
  }
  init();
}

Nach dem Login kopieren

Verwenden Sie diese Klasse

var c = new Class();
c.Method(); //使用方法

Nach dem Login kopieren

Das ist in Ordnung

Javascript selbst unterstützt keine Objektorientierung, es verfügt über keine Zugriffskontrollzeichen, es verfügt nicht über das Schlüsselwort class zum Definieren einer Klasse, es unterstützt keine Erweiterung oder Doppelpunkt für die Vererbung und es verwendet Virtual nicht zur Unterstützung von Virtual Da Javascript jedoch eine flexible Sprache ist, schauen wir uns an, wie Javascript ohne das Schlüsselwort class die Klassendefinition implementiert und Objekte erstellt.

1: Definieren Sie eine Klasse und erstellen Sie ein Instanzobjekt der Klasse

In Javascript verwenden wir Funktionen zum Definieren von Klassen wie folgt:

function Shape()
{
var x=1;
var y=2;
}

Nach dem Login kopieren

Man könnte sagen: Zweifel? Ist das nicht eine definierende Funktion? Ja, das ist eine Definitionsfunktion. Wir definieren eine Formfunktion und initialisieren x und y. Wenn Sie es jedoch aus einem anderen Blickwinkel betrachten, definieren Sie eine Shape-Klasse mit zwei Attributen x und y, und die Anfangswerte sind 1 bzw. 2. Das Schlüsselwort, das wir zum Definieren verwenden Klasse ist Funktion statt Klasse.

Dann können wir wie folgt ein Objekt aShape der Shape-Klasse erstellen:

Code kopieren Der Code lautet wie folgt:
var aShape = new Shape();

Zweitens: Öffentliche Attribute und private Attribute definieren

Wir haben das aShape-Objekt erstellt, aber wenn wir versuchen, auf seine Eigenschaften zuzugreifen, tritt ein Fehler wie folgt auf:

Code kopieren Der Code lautet wie folgt:
aShape.x=1;

Dies zeigt, dass mit var definierte Eigenschaften privat sind. Wir müssen dieses Schlüsselwort verwenden, um öffentliche Attribute

zu definieren
function Shape()
{
this.x=1;
this.y=2;
}

Nach dem Login kopieren

Auf diese Weise können wir auf die Attribute von Shape zugreifen, z.

Code kopieren Der Code lautet wie folgt:
aShape.x=2;

Nun, wir können basierend auf dem obigen Code zusammenfassen: Verwenden Sie var, um die privaten Attribute der Klasse zu definieren, und verwenden Sie dies, um die öffentlichen Attribute der Klasse zu definieren.

3: Definieren Sie öffentliche und private Methoden

In Javascript ist eine Funktion eine Instanz der Function-Klasse. Daher ist eine Funktion auch ein Objekt. Daher können wir dies auch tun Weisen Sie einer Klasse eine Funktion zu. Dann kann diese Attributvariable als Methode bezeichnet werden, da es sich um eine ausführbare Funktion handelt. Der Code lautet wie folgt:

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

Nach dem Login kopieren

Wir haben im obigen Code eine Zeichnung definiert und ihr eine Funktion zugewiesen. Als Nächstes können wir diese Funktion über aShape aufrufen, das in OOP als öffentliche Methode bezeichnet wird, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:
aShape.draw();

Wenn es mit var definiert wird, wird die Zeichnung privat, was in OOP als private Methode bezeichnet wird, z. B.

function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}

Nach dem Login kopieren

这样就不能使用aShape.draw调用这个函数了。

三:构造函数

Javascript并不支持OOP,当然也就没有构造函数了,不过,我们可以自己模拟一个构造函数,让对象被创建时自动调用,代码如下:

function Shape()
{
var init = function()
{
//构造函数代码
};
init();
}

Nach dem Login kopieren

在Shape的最后,我们人为的调用了init函数,那么,在创建了一个Shape对象是,init总会被自动调用,可以模拟我们的构造函数了。

四:带参数的构造函数

如何让构造函数带参数呢?其实很简单,将要传入的参数写入函数的参数列表中即可,如

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}

Nach dem Login kopieren

这样,我们就可以这样创建对象:

复制代码 代码如下:
var aShape = new Shape(0,1);

五:静态属性和静态方法

在Javascript中如何定义静态的属性和方法呢?如下所示

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}
Shape.count=0;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。
Shape.staticMethod=function(){};//定义一个静态的方法

Nach dem Login kopieren

有了静态属性和方法,我们就可以用类名来访问它了,如下

alert ( aShape.count );
aShape.staticMethod();

Nach dem Login kopieren

注意:静态属性和方法都是公有的,目前为止,我不知道如何让静态属性和方法变成私有的

六:在方法中访问本类的公有属性和私有属性

在类的方法中访问自己的属性,Javascript对于公有属性和私有属性的访问方法有所不同,请大家看下面的代码

function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
this.gx=ax;//访问公有属性,需要在变量名前加上this.
this.gy=ay;
};
init();
}

Nach dem Login kopieren

七:this的注意事项

根据笔者的经验,类中的this并不是一直指向我们的这个对象本身的,主要原因还是因为Javascript并不是OOP语言,而且,函数和类均用function定义,当然会引起一些小问题。

this指针指错的场合一般在事件处理上面,我们想让某个对象的成员函数来响应某个事件,当事件被触发以后,系统会调用我们这个成员函数,但是,传入的this指针已经不是我们本身的对象了,当然,这时再在成员函数中调用this当然会出错了。

解决方法是我们在定义类的一开始就将this保存到一个私有的属性中,以后,我们可以用这个属性代替this。我用这个方法使用this指针相当安全,而且很是省心~

我们修改一下代码,解决this问题。对照第六部分的代码看,你一定就明白了

function Shape(ax,ay)
{
var _this=this; //把this保存下来,以后用_this代替this,这样就不会被this弄晕了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
_this.gx=ax;//访问公有属性,需要在变量名前加上this.
_this.gy=ay;
};
init();
}

Nach dem Login kopieren

希望本文所述对大家JavaScript程序设计有所帮助。

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