Analyse spécifique de la fondation orientée objet JavaScript et de ce problème de pointage

L'éditeur ci-dessous vous proposera un article banal sur les bases de JavaScript orienté objet et ce problème de pointage. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un oeil avec l'éditeur

Avant-propos

Notre langage de programmation a connu de "l'orienté machine" à "la machine -orienté" Un processus allant de "orienté processus" à "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 en JS ! ! !

1. Problèmes fondamentaux de la POO

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

Orienté 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 La relation entre les classes et les objets

① Classe : un ensemble des mêmes caractéristiques (propriétés) et comportements (méthodes).

Par exemple : les êtres humains --> Attributs : taille, poids, sexe Méthodes : manger, parler, marcher

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

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

La classe est abstraite, l'objet est concret (la classe est l'abstraction de l'objet, l'objet est la concrétisation de la classe)

Expliquez :

La classe est un concept abstrait, seulement Nous On peut dire qu'une classe a des attributs et des méthodes, mais on 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. . .

L'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.属性
  }
}

② Instancier (nouveau) un objet via une classe.

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

attribut obj ; appeler la méthode

obj. 🎜>③Notes

>>> Le processus de création d'un nouvel objet via le nom de la classe est appelé "instanciation de 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 du gros chameau, faites attention à la différence avec les fonctions ordinaires.

2.2 Deux attributs importants constructor et instanceof①constructor : Renvoie le constructeur de l'objet actuel

>> >zhangsan.constructor = Person; √

②instanceof : Détecte si un objet est une instance d'une classe

>>>lisi instanceof Person √ lisi est transmis via Person; class new Hors de

>>>lisi instanceof Object √ Tous les objets sont des instances d'Object

>>>Person instanceof Object √ La fonction elle-même est également un objet

3. Ce problème de pointage en JavaScriptDans la partie précédente, nous avons créé une classe et créé un nouvel objet via cette classe. Cependant, il y a beaucoup de cela. De nombreux étudiants sont confus. Cela ne veut-il pas dire « ceci » ? Pourquoi l'attribut défini par ceci que j'ai écrit dans la fonction se retrouve-t-il dans l'objet produit par la fonction new ? ?

3.1 Celui qui appelle finalement la fonction, cela désignera qui !

① À qui cela renvoie ne doit pas considérer l'endroit où la fonction est déclarée, mais l'endroit où la fonction est appelée ! !

② Ce que cela désigne ne peut toujours être qu'un objet, pas une fonction ! !

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

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

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

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

② 通过对象.方法调用的，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对象。

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

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

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

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

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

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

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]());
// 函数最终调用者数组

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!