Compréhension approfondie du concept de prototypes en programmation JavaScript_Connaissances de base

Les objets prototypes de JavaScript prêtent toujours à confusion. Même les experts JavaScript expérimentés et même ses auteurs donnent souvent une explication très limitée de ce concept. Je pense que le problème vient de notre première compréhension des prototypes. Les prototypes sont toujours étroitement associés au nouveau, au constructeur et à la propriété déroutante du prototype. En fait, le prototypage est un concept assez simple. Pour mieux le comprendre, nous devons désapprendre les archétypes de construction que nous avons « appris » et ensuite revenir aux racines.

Qu'est-ce qu'un prototype ?

Un prototype est un objet qui hérite des propriétés d'autres objets.

Tout objet peut-il être un prototype ?

Oui

Ces objets ont des prototypes ?

Chaque objet a un prototype par défaut. Les prototypes eux-mêmes sont des objets, et chaque prototype possède lui-même un prototype. (À une exception près, le prototype d'objet par défaut se trouve en haut de chaque chaîne de prototypes, et les autres prototypes sont en fin de chaîne de prototypes)

En prenant du recul, qu'est-ce qu'un objet ?

En JavaScript, un objet est une collection arbitraire non ordonnée enregistrée sous forme de paires clé-valeur. S'il ne s'agit pas d'une classe primitive (indéfinie, nulle, boolean.nuber ou chaîne), c'est un objet.

Vous pouvez penser que chaque objet a un prototype. Mais quand j'ai écrit ({}).prototype, je suis devenu indéfini. Êtes-vous fou ?

Oubliez tout ce que vous savez sur la propriété prototype - c'est probablement une source de confusion. Le véritable prototype d'un objet est la propriété interne [[Prototype]] introduit la méthode d'accès standard, Object.getPrototypeOf(object ). . Cette dernière implémentation est prise en charge par Firefox, Safari, Chrome et IE9 De plus, à l'exception d'IE, tous les navigateurs prennent en charge la méthode d'accès non standard __proto__ Sinon, on peut seulement dire que le constructeur d'un objet est son prototype Propriétés.

var a = {};
 
//Opera 或 IE<=8下失败
Object.getPrototypeOf(a); //[object Object]
 
//IE下失败
a.__proto__; //[object Object]
 
//所有浏览器
//(but only if constructor.prototype has not been replaced and fails with Object.create)
a.constructor.prototype; //[object Object]

Très bien, false est un type primitif, pourquoi false.__proto__ renvoie-t-il une valeur ?

//(works in IE<=8 too, due to double-negative)
false.__proto__ === Boolean(false).__proto__; //true

Je souhaite implémenter l'héritage à l'aide de prototypes, que dois-je faire maintenant ?

.

//fails in IE<=8
var a = {};
a.__proto_ = Array.prototype;
a.length; //0

Avant de donner un exemple, j'ai besoin de savoir à quoi sert la propriété constructor.prototype ?

//永远不是构造函数的方法，无论如何都是有prototype属性的
Math.max.prototype; //[object Object]
 
//构造函数也有prototype属性
var A = function(name) {
  this.name = name;
}
A.prototype; //[object Object]
 
//Math不是一个方法，所以没有prototype属性
Math.prototype; //null

//(在IE中会失败)
var A = function(name) {
  this.name = name;
}
 
A.prototype == A.__proto__; //false
A.__proto__ == Function.prototype; //true - A的prototype是它的构造函数的prototype属性

Pouvez-vous donner un exemple ?

//构造器. <em>this</em> 作为新对象返回并且它内部的[[prototype]]属性将被设置为构造器默认的prototype属性
var Circle = function(radius) {
  this.radius = radius;
  //next line is implicit, added for illustration only
  //this.__proto__ = Circle.prototype;
}
 
//扩充 Circle默认的prototype对象的属性因此扩充了每个由它新建实例的prototype对象的属性
Circle.prototype.area = function() {
  return Math.PI*this.radius*this.radius;
}
 
//创建Circle的两个示例，每个都会使用相同的prototype属性
var a = new Circle(3), b = new Circle(4);
a.area().toFixed(2); //28.27
b.area().toFixed(2); //50.27

var A = function(name) {
  this.name = name;
}
 
var a = new A('alpha');
a.name; //'alpha'
 
A.prototype.x = 23;
 
a.x; //23

Mais si je remplace l'attribut prototype par un nouvel objet, a.__proto__ pointe toujours vers l'objet d'origine.

var A = function(name) {
  this.name = name;
}
 
var a = new A('alpha');
a.name; //'alpha'
 
A.prototype = {x:23};
 
a.x; //null

À quoi ressemble un prototype par défaut ?

var A = function() {};
A.prototype.constructor == A; //true
 
var a = new A();
a.constructor == A; //true (a 的constructor属性继承自它的原型)

Quelle est la relation entre instanceof et prototype ?
Si l'attribut prototype de A apparaît dans la chaîne prototype de a, l'expression une instance de A retournera vrai. Cela signifie que nous pouvons tromper instanceof pour qu'il échoue.

var A = function() {}
 
var a = new A();
a.__proto__ == A.prototype; //true - so instanceof A will return true
a instanceof A; //true;
 
//mess around with a's prototype
a.__proto__ = Function.prototype;
 
//a's prototype no longer in same prototype chain as A's prototype property
a instanceof A; //false

String.prototype.times = function(count) {
  return count < 1 &#63; '' : new Array(count + 1).join(this);
}
 
"hello!".times(3); //"hello!hello!hello!";
"please...".times(6); //"please...please...please...please...please...please..."

a.__proto__ = b;
b.__proto__ = c;
c.__proto__ = {}; //默认对象
{}.__proto__.__proto__; //null