Comment comprendre les bases du JavaScript orienté objet et le problème de ce pointage

Introduction

Le langage est passé par un processus allant de « orienté machine » à « orienté processus » et 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 en JS ! ! !

1. Problèmes de base de la POO

1.1Qu'est-ce que 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.2Trois caractéristiques majeures de l'orientation objet

Héritage, encapsulation, polymorphisme

1.3La relation entre classes et objets

① Classe  : Un ensemble de classes avec les mêmes caractéristiques (propriétés) et comportements (méthodes).

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

② Objet  : De la classe, retirez l'individu avec certaines valeurs d'attribut et 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

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

Expliquez :

Une classe est un concept abstrait On peut seulement dire qu'une classe a des attributs et des méthodes, mais les attributs ne peuvent pas se voir attribuer une valeur spécifique. 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、 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 de la casse chameau, c'est-à-dire que la première lettre de chaque mot doit être en majuscule.

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

② Instancier (nouveau) un objet via une classe.

var obj = new 类名(属性1的具体值);
obj.属性;    调用属性
obj.方法();     调用方法

③Notes

>>> Le processus de 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 du gros chameau, faites attention à la différence avec les fonctions ordinaires.

2.2Deux attributs importants constructeur 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 créé via la classe Person new

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

>>>Person instanceof Object √ L'instance la fonction elle-même est également un objet

3、 JavaScript中的this指向问题

3. Ce problème de pointage en JavaScript

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

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

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！
② this指向的，永远只可能是对象，不可能是函数！！
③ 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]());// 函数最终调用者数组

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!