Le prototype prototype et la chaîne de prototypes de fonctions JavaScript

1. Prototypes

La propriété prototype de la fonction

• Chaque fonction a un attribut prototype, qui par défaut est un objet vide Object (c'est-à-dire : objet prototype).
• Il existe un constructeur d'attribut dans l'objet prototype, qui pointe vers l'objet fonction.

Le prototype de Person pointe vers son Person Prototype, et le constructeur de Person Prototype pointe vers Person.

// 用户对象
function Person() {
    
    
				
};
			
console.log(Person.prototype);
			
Person.prototype.getMoney = function() {
    
    
	return 5000000;
	console.log("身价500w");
}
			
console.log((new Person()).getMoney());

Ajouter des propriétés (généralement des méthodes) aux objets prototypes

• Fonction : tous les objets d'instance de la fonction ont automatiquement les propriétés (méthodes) du prototype

2. Prototypes explicites et implicites

Chaque fonction fonction a un prototype, c'est-à-dire un prototype explicite (propriété)

Chaque objet instance a un __proto__ appelé prototype implicite (propriété).

La valeur du prototype implicite d'un objet est la valeur du prototype explicite de son constructeur correspondant.

structure de la mémoire

// 第1步，内部语句：this.prototype = {}
function Fn() {
    
    };
			
console.log(Fn.prototype);
			
// 第2步，内部语句：this.__proto__ = Fn.prototype
let fn = new Fn();
			
console.log(fn.__proto__);
console.log(fn.__proto__ === Fn.prototype);
			
// 在原型上添加方法
Fn.prototype.test = function () {
    
    
	console.log("invoke test...");
}
fn.test();

La structure mémoire correspondante du code ci-dessus est la suivante :

Résumer:

• L'attribut prototype de la fonction : il est automatiquement ajouté lorsque la fonction est définie, et la valeur par défaut est un objet Object vide.
• L'attribut __proto__ de l'objet : il est automatiquement ajouté lors de la création de l'objet, et la valeur par défaut est la valeur de l'attribut prototype du constructeur.
• Les prototypes explicites peuvent être directement manipulés dans le programme, mais les prototypes implicites ne peuvent pas être directement manipulés (avant ES6)

3. Chaîne prototype

3.1 Séquence d'accès

La chaîne de prototypes (chaîne de prototypes implicite), principalement utilisée pour retrouver les propriétés (méthodes) de l'objet ; lors de l'accès aux propriétés d'un objet,

• Recherchez d'abord dans ses propres attributs et revenez si trouvé
• Sinon, recherchez le long de la chaîne __proto__, trouvez et revenez
• S'il n'est pas trouvé à la fin, il renvoie undéfini

            console.log(Object.prototype.__proto__)
			function Fn() {
    
    
				this.test1 = function() {
    
    
					console.log("test1()")
				}
			}
			
			Fn.prototype.test2 = function() {
    
    
				console.log("test2()")
			}
			
			let fn = new Fn();
			fn.test1();
			fn.test2();
			console.log(fn.toString);
			fn.test3();

Le résultat est le suivant :

Relation objet constructeur/prototype/entité

L'objet pointé par le prototype explicite de la fonction est un objet d'instance Object vide par défaut (mais Object n'est pas satisfait)

Toutes les fonctions sont des instances de Function (y compris Function)

L'objet prototype de l'objet est la fin de la chaîne des prototypes.

Le problème de propriété de la chaîne de prototypes
Lors de la lecture de la valeur de propriété de l'objet : il la trouvera automatiquement dans la chaîne de prototypes
Lors de la définition de la valeur de propriété de l'objet : il ne recherchera pas la chaîne de prototypes. S'il n'y a pas une telle propriété dans la chaîne de prototypes objet actuel, ajoutez directement cette propriété et définissez sa
méthode de valeur Généralement définis dans le prototype, les attributs sont généralement définis sur l'objet lui-même via le constructeur.

function Fn() {
    
    
				
}
Fn.prototype.a = 'xxx';
let fn1 = new Fn();
console.log(fn1.a, fn1);
			
let fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a, fn2.a, fn1)

Le résultat est le suivant :

4. instance de

4.1 Comment juger

Expression : Une instance de B
Si l'objet prototype explicite de la fonction B est sur la chaîne prototype de l'objet A, renvoie vrai, sinon renvoie faux

La fonction est une instance générée par elle-même via un nouveau

function Foo() {
    
    }
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true
			

Le diagramme de relation du prototype complet :