Ausführliche Erklärung zum Definieren von Klassen in JavaScript_Javascript-Kenntnissen

Die Beispiele in diesem Artikel beschreiben, wie Klassen in JavaScript definiert werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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

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

2. Definieren Sie öffentliche und private Attribute

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

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

Code kopieren Der Code lautet wie folgt:

aShape.x = 2;

Okay, 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; 
};
}

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 dieser Draw privat, was in OOP als private Methode bezeichnet wird, z. B.

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

Auf diese Weise können Sie aShape.draw nicht zum Aufrufen dieser Funktion verwenden.

3. Konstruktor

Javascript unterstützt kein OOP und natürlich gibt es keinen Konstruktor. Wir können jedoch selbst einen Konstruktor simulieren und ihn beim Erstellen des Objekts automatisch aufrufen lassen

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

Am Ende von Shape haben wir die Funktion init künstlich aufgerufen. Wenn dann ein Shape-Objekt erstellt wird, wird init immer automatisch aufgerufen und unser Konstruktor kann simuliert werden.

4. Konstruktor mit Parametern

Wie bringt man den Konstruktor dazu, Parameter anzunehmen? Tatsächlich ist es sehr einfach, die zu übergebenden Parameter in die Parameterliste der Funktion zu schreiben, z. B.

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

Auf diese Weise können wir Objekte wie dieses erstellen:

Code kopieren Der Code lautet wie folgt:

var aShape = new Shape( 0 , 1 );

5. Statische Eigenschaften und statische Methoden

Wie definiere ich statische Eigenschaften und Methoden in Javascript? Wie unten gezeigt

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 (){}; // 定义一个静态的方法

Mit statischen Eigenschaften und Methoden können wir wie folgt über den Klassennamen darauf zugreifen

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

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

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

在类的方法中访问自己的属性，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();
}

七、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();
}

以上我们聊了如何在Javascript中定义类，创建类的对象，创建公有和私有的属性和方法，创建静态属性和方法，模拟构造函数，并且讨论了容易出错的this。

关于Javascript中的OOP实现就聊到这里，以上是最实用的内容，一般用Javascript定义类，创建对象用以上的代码已经足够了。当然，你还可以用mootools或prototype来定义类，创建对象。我用过mootools框架，感觉很不错，它对Javascript的类模拟就更完善了，还支持类的继承，有兴趣的读者可以去尝试一下。当然，如果使用了框架，那么在你的网页中就需要包含相关的js头文件，因此我还是希望读者能够在没有框架的情况下创建类，这样，代码效率较高，而且你也可以看到，要创建一个简单的类并不麻烦～

补充：

JavaScript类定义的四种方式：

// 1、工厂方式
function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();
/*
定义了一个能创建并返回特定类型对象的工厂函数， 看起来还是不错的， 但有个小问题 ，
每次调用时都要创建新函数 showColor，我们可以把它移到函数外面，
function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}
在工厂函数中直接指向它 tempCar.getName = getName;
这样避免了重复创建函数的问题，但看起来不像对象的方法了。
*/
// 2、构造函数方式
function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor(); 
/*
可以看到与第一中方式的差别，在构造函数内部无创建对象，而是使用 this 关键字。
使用 new 调用构造函数时，先创建了一个对象，然后用 this 来访问。
这种用法于其他面向对象语言很相似了， 但这种方式和上一种有同一个问题， 就是重复创建函数。
*/
// 3、原型方式
function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();
/*
首先定义了构造函数 Car，但无任何代码，然后通过 prototype 添加属性。优点：
  a. 所有实例存放的都是指向 showColor 的指针，解决了重复创建函数的问题
  b. 可以用 instanceof 检查对象类型
  alert(car3 instanceof proCar);//true
  缺点，添加下面的代码：
  proCar.prototype.drivers = newArray("mike", "sue");
  car3.drivers.push("matt");
  alert(car3.drivers);//outputs "mike,sue,matt"
  alert(car3.drivers);//outputs "mike,sue,matt"
  drivers 是指向 Array 对象的指针，proCar 的两个实例都指向同一个数组。
*/
// 4、动态原型方式
function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);
/*
这种方式是我最喜欢的， 所有的类定义都在一个函数中完成， 看起来非常像其他语言的
类定义，不会重复创建函数，还可以用 instanceof
*/

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