Cet article vous présente une introduction aux prototypes JavaScript et aux méthodes de chaîne de prototypes (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. Question
Comment déterminer avec précision si une variable est un tableau
Écrire un exemple d'héritage de chaîne de prototype
Autres modes de mise en œuvre de l'héritage
es6 Quel est le principe sous-jacent de l'héritage
Décrire le processus de création d'un nouvel objet
Comment utiliser la chaîne de prototypes dans zepto et autres codes sources
2. Points de connaissance
2.1 Constructeur
Caractéristiques : Commencez par une lettre majuscule
function Foo(name,age){
//var obj = {}
//this = {}
this.name = name;
this.age = age;
this.class = 'class1'
// return this
}
var f1 = new Foo('liming',19);Développez
var o = {} est le sucre syntaxique pour var o = new Object()
var a = [] est le sucre syntaxique pour var a = new Array()
function Foo(){} tout à fait In var Foo = new Function(){}
2.2 Règles du prototype
Cinq règles :
1 . Tous les types de référence (objet, tableau, fonctions) ont tous des caractéristiques d'objet, c'est-à-dire que les attributs peuvent être librement étendus
2. Tous les types de référence (objets, tableaux, fonctions) ont un attribut __proto__ (prototype implicite). , qui est un objet ordinaire
3. Toutes les fonctions ont des attributs de prototype (prototype explicite) et sont également des objets ordinaires
4 Tous les types de référence (objets, tableaux, fonctions) pointent vers la valeur __proto__. le prototype de son constructeur
5. En essayant d'obtenir les attributs d'un objet, si la variable elle-même n'a pas cet attribut, elle ira dans son __proto__ pour le trouver
for (var key in object) {
//高级浏览器中已经屏蔽了来自原型的属性
//建议加上判断保证程序的健壮性
if (object.hasOwnProperty(key)) {
console.log(object[key]);
}
}2.3 Chaîne de prototypes
obj.__ proto . proto proto __ ...
Object.prototype = . == null
instanceof est utilisé pour déterminer à quel constructeur appartient le type de référence
obj instanceob Foo
Signification réelle : déterminer si Foo.prototype est sur la chaîne de prototypes de obj
3. Réponses aux questions
3.1 Comment déterminer avec précision si une variable est un tableau
arr instanceof Array
3.2 Écrire un exemple d'héritage de chaîne de prototypes
Avantages : Implémentation simplefunction Elem(id){
this.elem = document.getElementById(id);
};
Elem.prototype.html = function(val){
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this;
}else{
return elem.innerHTML;
}
}
Elem.prototype.on = function(type,fun){
var elem = this.elem;
elem.addEventListener(type,fun);
return this;
}
var p1 = new Elem('id1');
p1.html("test").on('click',function(){
console.log('点击');
})Inconvénients : 1 Impossible de transmettre les paramètres au constructeur de la classe parent
2. en même temps, lors de la modification de l'attribut de type de référence dans le prototype d'un objet, l'autre objet Cette propriété sera également modifiée. Parce que les propriétés de référence de l'objet prototype sont partagées par toutes les instances.
var obj = {
0:'a',
1:'b',
arr:[1]
}
function Foo(arr2){
this.arr2 = [1]
}
Foo.prototype = obj;
var foo1 = new Foo();
var foo2 = new Foo();
foo1.arr.push(2);
foo1.arr2.push(2);
console.log(foo2.arr); //[1,2]
console.log(foo2.arr2); //[1]Avantages : Vous pouvez transmettre des paramètres à la classe parent, et la sous-classe ne partagera pas les attributs de référence de la classe parent
Inconvénients : Impossible d'implémenter les fonctions de réutilisation, chaque sous-classe a un nouveau plaisir, un trop grand nombre affectera les performances et l'objet prototype de la classe parent ne peut pas être hérité.
3.3.3 Héritage combiné
Avantages : Il n'y a aucun problème de partage des attributs de référence, les paramètres peuvent être transmis et les fonctions peuvent être réutilisées function Super(b){
this.b = b;
this.fun = function(){}
}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
var foo1 = new Foo(1,2);
console.log(foo1.b);Inconvénients : Le les attributs de la classe parent seront instanciés deux fois, la classe parent de l'instance réelle ne pourra pas être obtenue (il est impossible de distinguer si l'instance est créée par la classe parent ou la classe parent)
Optimisation :
Inconvénient : Impossible de distinguer si l'instance est Si la classe parent est créée ou si la classe enfant est crééefunction Super(){
// 只在此处声明基本属性和引用属性
this.val = 1;
this.arr = [1];
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
Super.call(this); // 核心
// ...
}
Sub.prototype = new Super();3.3.4 Héritage de combinaison parasite
Parasite le prototype de la classe parent une fois, c'est-à-dire l'envelopper dans un prototype d'objet vide, puis l'utiliser. L'objet est instancié en tant que sous-classe du péototype. Inconvénients : Il est impossible de distinguer si une instance est créée par une classe parent ou une sous-classe function Super(b){
this.b = b;
this.fun = function(){}
}
Super.prototype.c = function(){console.log(1111)}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
Foo.prototype = Super.prototype;
//修复构造函数：
var foo1 = new Foo(1,2);Vous pouvez ajouter le code suivant :
Cette solution ne peut pas être utilisé pour la méthode d'optimisation de combinaison ci-dessus, car la sous-classe et la classe parent font référence au même objet prototype, les modifications seront modifiées en même temps. function Super(b){
this.b = b;
}
Super.prototype.c = function(){console.log(1111)}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
var f = new Function();
f.prototype = Super.prototype;
Foo.prototype = new f();
//等同于 Foo.prototype = Object.create(Super.prototype);
var foo1 = new Foo(1,2);Résumé :
L'héritage réalise principalement la réutilisation des méthodes et des attributs de la classe parent par les sous-classes.
Les propriétés de référence de l'objet prototype sont partagées par toutes les instances, nous voulons donc éviter d'hériter des propriétés du prototype.
Foo.prototype.constructor = Foo
Ce qui précède est un exemple d'héritage de combinaison parasite.
1. Héritez des propriétés du constructeur Stream en appelant le constructeur OutgoingMessage.
2. Appelez la méthode hérite pour hériter des propriétés du prototype Stream.
function inherits(ctor, superCtor) {
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
};
function Stream(){
//...
}
function OutgoingMessage() {
Stream.call(this);
//...
}
inherits(OutgoingMessage, Stream);
OutgoingMessage.prototype.setTimeout = ...Cette méthode fait en fait le travail dans notre héritage de combinaison parasite ci-dessus
Les paramètres suivants servent à ajouter des attributs à l'objet prototype, des attributs facultatifs (non obligatoires) ), c'est-à-dire s'utiliser comme constructeur d'un objet nouvellement créé.3.4 Comment implémenter l'héritage es6
ctor.prototype=Object.create(superCtor.prototype,{.....});创建一个对象
{}._proto_ = 构造函数.prototype
this指向这个对象
执行代码即对this赋值
返回this
var Zepto = (function(){
var $,zepto = {}
// ...省略N行代码...
$ = function(selector, context){
return zepto.init(selector, context)
}
zepto.init = function(selector, context) {
var dom
// 针对参数情况，分别对dom赋值
// 最终调用 zepto.Z 返回的数据
return zepto.Z(dom, selector)
}
fnction Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
$.fn = {
// 里面有若干个工具函数
}
zepto.Z.prototype = Z.prototype = $.fn
// ...省略N行代码...
return $
})()
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
