communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > js原型链原理看图说明_javascript技巧

js原型链原理看图说明_javascript技巧

WBOY
Libérer： 2016-05-16 17:51:59
original
1261 Les gens l'ont consulté

当初ECMAscript的发明者为了简化这门语言，同时又保持继承的属性，于是就设计了这个链表。。
在数据结构中学过链表不，链表中有一个位置相当于指针，指向下一个结构体。

于是乎__proto__也一样，每当你去定义一个prototype的时候，相当于把该实例的__proto__指向一个结构体，那么这个被指向结构体就称为该实例的原型。

文字说起来有点儿绕，看图说话

复制代码 代码如下:

var foo = {
x: 10,
y: 20
};

Figure 1. A basic object with a prototype.


当我不指定__proto__的时候，foo也会预留一个这样的属性，

如果有明确的指向，那么这个链表就链起来啦。

很明显，下图中b和c共享a的属性和方法，同时又有自己的私有属性。

__proto__默认的也有指向。它指向的是最高级的object.prototype，而object.prototype的__proto__为空。
复制代码 代码如下:

var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 20,
__proto__: a
};

var c = {
y: 30,
__proto__: a
};

// call the inherited method
b.calculate(30); // 60

Figure 2. A prototype chain.


理解了__proto__这个属性链接指针的本质。。再来理解constructor。

当定义一个prototype的时候，会构造一个原形对象，这个原型对象存储于构造这个prototype的函数的原形方法之中.
复制代码 代码如下:

function Foo(y){
this.y = y ;
}

Foo.prototype.x = 10;

Foo.prototype.calculate = function(z){
return this.x+this.y+z;
};

var b = new Foo(20);

alert(b.calculate(30));

Figure 3. A constructor and objects relationship.

【参考文档】

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
Étiquettes associées：
chaîne de prototypes js
source：php.cn
Article précédent：20款非常优秀的 jQuery 工具提示插件 推荐_jquery Article suivant：EasyUI 中 MenuButton 的使用方法_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Une erreur est générée lors de l'importation du constructeur de prototype Javascript dans une application angulaire J'ai une application Angular dans laquelle j'essaie d'importer un fichier JS doté d'un con...
Depuis 2024-04-04 11:36:15
0
1
288
Générer du contenu à l'aide d'Ajax - le défilement jusqu'à Id ne fonctionne pas Je génère du contenu de page basé sur des données obtenues via ajax. Le problème que j'ai ...
Depuis 2024-04-04 09:29:39
0
1
397
3. Le modèle JS 3D a été ajouté mais n'est pas visible J'essaie d'ajouter un modèle 3D à mon site Web. J'utilise trois .js. J'ai tout essayé mais...
Depuis 2024-04-03 19:06:13
0
1
264
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal