Explication détaillée de la façon de définir des classes dans les compétences JavaScript_javascript

Les exemples de cet article décrivent comment définir des classes en JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Javascript lui-même ne prend pas en charge l'orientation objet, il n'a pas de caractères de contrôle d'accès, il n'a pas de mot-clé class pour définir une classe, il ne prend pas en charge l'extension ou les deux-points pour l'héritage, et il n'utilise pas virtual pour prendre en charge virtual fonctions Cependant, Javascript est un langage flexible, voyons comment Javascript sans le mot-clé class implémente la définition de classe et crée des objets.

1. Définir une classe et créer un objet instance de la classe

En Javascript, nous utilisons des fonctions pour définir des classes, comme suit :

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

Vous pourriez dire, doute ? N'est-ce pas une fonction déterminante ? Oui, c'est une fonction de définition. Nous définissons une fonction Shape et initialisons x et y. Cependant, si vous le regardez sous un autre angle, il s'agit de définir une classe Shape, qui a deux attributs x et y, et les valeurs initiales sont respectivement 1 et 2. Cependant, le mot-clé que nous utilisons pour définir le. la classe est une fonction au lieu d'une classe.

Ensuite, on peut créer un objet aShape de la classe Shape, comme suit :

Copier le code Le code est le suivant :

var aShape = new Shape();

2. Définir les attributs publics et privés

Nous avons créé l'objet aShape, mais lorsque nous essayons d'accéder à ses propriétés, une erreur se produit, comme suit :

Copier le code Le code est le suivant :

aShape.x = 1;

Cela montre que les propriétés définies avec var sont privées. Nous devons utiliser ce mot-clé pour définir les attributs publics

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

De cette façon, nous pouvons accéder aux attributs de Shape, tels que.

Copier le code Le code est le suivant :

aShape.x = 2;

D'accord, nous pouvons résumer en nous basant sur le code ci-dessus : utilisez var pour définir les attributs privés de la classe, et utilisez-le pour définir les attributs publics de la classe.

3. Définir les méthodes publiques et les méthodes privées

En Javascript, une fonction est une instance de la classe Function. Function hérite indirectement d'Object. Par conséquent, une fonction est également un objet. Par conséquent, nous pouvons utiliser la méthode d'affectation pour créer une fonction. attribuez une fonction à une classe. Une variable d'attribut, alors cette variable d'attribut peut être appelée une méthode car c'est une fonction exécutable. Le code est le suivant :

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

Nous avons défini un dessin dans le code ci-dessus et lui avons attribué une fonction. Ensuite, nous pouvons appeler cette fonction via aShape, qui est appelée une méthode publique en POO, telle que :

Copier le code Le code est le suivant :

aShape.draw();

S'il est défini avec var, alors ce tirage devient privé, ce qui est appelé une méthode privée en POO, comme

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

De cette façon, vous ne pouvez pas utiliser aShape.draw pour appeler cette fonction.

3. Constructeur

Javascript ne supporte pas la POO, et bien sûr il n'y a pas de constructeur. Cependant, nous pouvons simuler nous-mêmes un constructeur et le laisser appeler automatiquement lors de la création de l'objet. Le code est le suivant :

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

A la fin de Shape, nous avons appelé artificiellement la fonction init. Ensuite, lorsqu'un objet Shape est créé, init sera toujours automatiquement appelé et notre constructeur pourra être simulé.

4. Constructeur avec paramètres

Comment faire prendre des paramètres au constructeur ? En fait, c'est très simple. Il suffit d'écrire les paramètres à passer dans la liste des paramètres de la fonction, comme

.

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

De cette façon, nous pouvons créer des objets comme celui-ci :

Copier le code Le code est le suivant :

var aShape = new Shape( 0 , 1 );

5. Propriétés statiques et méthodes statiques

Comment définir des propriétés et méthodes statiques en Javascript ? Comme indiqué ci-dessous

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

Avec les propriétés et méthodes statiques, nous pouvons y accéder en utilisant le nom de la classe, comme suit

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程序设计有所帮助。