JavaScript orienté objet et ce pointage (avec code)-js tutoriel-php.cn

Cette fois, je vous présente du JavaScript orienté objet et ce pointage (avec code). Quelles sont les précautions lors de l'utilisation de JavaScriptorienté objet et ce pointage. Voici des cas pratiques. . Jetons un coup d'oeil.

Notre langage de programmation est passé par un processus allant de « orienté machine », à « orienté processus », puis à « orienté objet ». JavaScript est un langage basé sur les objets, qui se situe entre l'orienté processus et l'orienté objet. Dans le processus d'apprentissage de JavaScript, la POO est une partie très importante. Discutons de l'approche orientée objet dans JS ! ! !

1. Problèmes fondamentaux de la POO

1.1 Que sont l'orienté processus et l'orienté objet ?

Orienté vers le processus : concentrez-vous sur les étapes du processus permettant de résoudre un problème. La particularité de la programmation est que chaque étape du processus est implémentée par des fonctions une à une, sans les concepts de classes et d'objets.

Orienté objet : concentrez-vous sur l'objet qui résout le problème. La caractéristique de la programmation est que les classes apparaissent les unes après les autres et que l'objet est obtenu de la classe et utilisé pour résoudre des problèmes spécifiques.

Pour l'appelant, l'orientation processus nécessite que l'appelant implémente lui-même diverses fonctions. L'orientation objet, en revanche, doit uniquement indiquer à l'appelant les fonctions de méthodes spécifiques dans l'objet, sans exiger que l'appelant comprenne les détails d'implémentation de la méthode.

1.2 Trois caractéristiques majeures de l'orienté objet

Héritage, encapsulation, polymorphisme

1.3 Relation entre classes et objets

① Classe : Un ensemble de caractéristiques (propriétés) et de comportements (méthodes) similaires.

Par exemple : Humain --- Attributs : taille, poids, sexe Méthodes : manger, parler, marcher

② Objet : De la classe, retirez un individu avec certaines valeurs et méthodes d'attribut.

Par exemple : Zhang San ---> Attributs : Taille 180, Poids 180 Méthode : Parler --> Je m'appelle Zhang San, taille 180

③ La relation entre les classes et les objets

Les classes sont abstraites, les objets sont concrets (les classes sont l'abstraction des objets, les objets sont la concrétisation des classes)

Expliquez :

La classe est un concept abstrait. On peut seulement dire qu'une classe a des attributs et des méthodes , mais elle ne peut pas attribuer de valeurs spécifiques aux attributs. Par exemple, les humains ont des noms, mais nous ne pouvons pas dire quels sont leurs noms. . .

Un objet est une instance spécifique, un individu qui attribue des valeurs spécifiques aux attributs de la classe. Par exemple, si Zhang San est un être humain individuel, nous pouvons dire que le nom de Zhang San est Zhang San. C'est-à-dire que Zhang San a attribué une affectation spécifique à chaque attribut des êtres humains, donc Zhang San est un objet généré par les humains.

2. Orienté objet en JavaScript

2.1 Étapes pour créer des classes et des objets

①Créer une classe (Constructeur) : Le nom de la classe doit utiliser la règle du gros chameau, c'est-à-dire que la première lettre de chaque mot doit être en majuscule.

function 类名(属性1){
  this.属性1 = 属性1;
  this.方法 = function(){
   //方法中要调用自身属性，必须要使用this.属性
  }
}

Copier après la connexion

② Instanciez (nouveau) un objet via la classe.

var obj = nouveau nom de classe (valeur spécifique de l'attribut 1);

obj.property ; appeler la propriété

obj.method(); méthode d'appel

③Remarques

>>>Le processus de nouvelle création d'un objet via le nom de la classe est appelé "instanciation de la classe"

>>>Ceci dans la classe pointera vers l'objet nouvellement créé une fois instancié. Par conséquent, this.property et this.method lient en fait les propriétés et les méthodes à l'objet qui est sur le point d'être nouveau.

>>>Dans une classe, pour appeler ses propres propriétés, vous devez utiliser ce nom de propriété. Si vous utilisez directement le nom de la variable, vous ne pouvez pas accéder à la propriété correspondante.

>>>Les noms de classe doivent utiliser la règle de la casse chameau et faire attention à la différence avec les fonctions ordinaires.

2.2 Deux attributs importants constructeur et instanceof

①constructor：返回当前对象的构造函数

>>>zhangsan.constructor = Person; √

②instanceof：检测一个对象，是不是一个类的实例；

>>>lisi instanceof Person √ lisi是通过Person类new出的

>>>lisi instanceof Object √ 所有对象都是Object的实例

>>>Person instanceof Object √ 函数本身也是对象

3、 JavaScript中的this指向问题

在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。但是，这里面出现了大量的this。很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？

3.1谁最终调用函数，this就指向谁！

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！

② this指向的，永远只可能是对象，不可能是函数！！

③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。

3.2this指向的规律(与函数的调用方式息息相关！)

① 通过函数名()调用的，this永远指向window

func(); // this--->window
//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。

Copier après la connexion

② 通过对象.方法调用的，this指向这个对象

// 狭义对象
 var obj = {
  name:"obj",
  func1 :func
 };
 obj.func1(); // this--->obj
//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。
 // 广义对象
 document.getElementById("p").onclick = function(){
  this.style.backgroundColor = "red";
}; // this--->p
//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个p控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个p对象。

Copier après la connexion

③ 函数作为数组的一个元素，用数组下标调用，this指向这个数组

var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。

Copier après la connexion

④ 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。

Copier après la connexion

⑤ 函数作为构造函数，使用new关键字调用，this指向新new出的对象

var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。

Copier après la connexion

3.3关于this问题的面试题

var fullname = 'John Doe';
var obj = {
  fullname: 'Colin Ihrig',
  prop: {
    fullname: 'Aurelio De Rosa',
    getFullname: function() {
      return this.fullname;
    }
  }
};
console.log(obj.prop.getFullname()); 
// 函数的最终调用者 obj.prop 
   
var test = obj.prop.getFullname;
console.log(test()); 
// 函数的最终调用者 test() this-> window
   
obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函数最终调用者是obj
   
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());
// 函数最终调用者数组

Copier après la connexion

好了，这篇博客，我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤，以及重点讲解的this指向问题！希望能够帮助大家真正的理解了this的认知，下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持！！！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！