Explication détaillée des classes de définition javascript et exemples d'implémentation des compétences classes

Les exemples de cet article décrivent l'implémentation de classes et de classes de définition javascript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Récemment, je vois souvent des gens demander dans plusieurs groupes comment une fonction d'une classe appelle cette méthode qui est exposée après avoir été définie. Maintenant, j'ai un essai sur la mise en œuvre en classe.

Parlons d’abord des cours. Dans une classe nous aurons les caractéristiques suivantes :

1. Méthodes publiques
2. Méthodes privées
3. Attributs
4. Variables privées
5. Destructeur

Regardons directement un exemple :

/***定义类***/
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(); //调用私用方法
  }
}

Copier après la connexion

J'ai écrit toutes les notes ici, donc tout le monde peut probablement les comprendre d'un coup d'œil. Pour les amis qui écrivent rarement du JS, vous vous demanderez peut-être pourquoi je définis une variable _self, car en js, elle n'a pas besoin d'être utilisée dans d'autres langages objets, et cela changera au cours de son analyse et de son exécution. Ici, je vais parler brièvement de la définition de ceci en js, je peux en écrire plus si nécessaire.

Définition : c'est l'objet auquel appartient la fonction qui le contient lorsqu'elle est appelée comme méthode.
Caractéristiques : L'environnement de celui-ci peut changer à mesure que la fonction est attribuée à différents objets !

Les amis intéressés peuvent rechercher des informations en ligne pour en savoir plus. Revenons au sujet, le but de _self ici est d'ouvrir une variable privée supplémentaire et de pointer la référence directement vers la classe elle-même.

Je viens de mentionner un problème de destructeur, qui peut être implémenté directement à l'aide de code. Écrivez simplement le code d’exécution directement à la fin de la fonction.

/***定义类***/
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();
}

Copier après la connexion

Utilisez cette classe

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

Copier après la connexion

C'est bon

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

Copier après la connexion

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

Deux : Définir les attributs publics et les attributs 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;
}

Copier après la connexion

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;

Eh bien, 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;
};
}

Copier après la connexion

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 le tirage devient privé, ce qui est appelé une méthode privée en POO, telle que

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

Copier après la connexion

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

三：构造函数

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

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

Copier après la connexion

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

四：带参数的构造函数

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

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

Copier après la connexion

这样，我们就可以这样创建对象：

复制代码代码如下:

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

Copier après la connexion

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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

Copier après la connexion

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