Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée du prototype JS et de la chaîne de prototypes

小云云
Libérer: 2018-03-07 14:29:27
original
1602 Les gens l'ont consulté

Cet article partage principalement avec vous des exemples détaillés de prototypes JS et de chaînes de prototypes, dans l'espoir d'aider tout le monde à mieux comprendre le prototype JS et la chaîne de prototypes.

Constructeur (la première lettre du nom de la fonction est en majuscule) : similaire à un modèle

function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class1';
//return this;默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);创建多个对象
Copier après la connexion

Constructeur - extension : (tous les types de référence ont des constructeurs)

var a = {} est en fait le sucre syntaxique pour var a = new Object()

var a = [] est en fait le sucre syntaxique pour var a = new Array()

function Foo( ){ ...} En fait, c'est var Foo = new Function()

Utilisez instanceof pour déterminer si une fonction est un constructeur de type référence

*Règles et exemples de prototype : (Prototype les règles sont des prototypes d'apprentissage La base de la chaîne)

5 règles prototypes :

-Tous les types de référence (objets, tableaux, fonctions) ont des caractéristiques d'objet et peuvent être librement étendus avec des attributs (sauf 'null' )

-Tous les types de référence (objets, tableaux, fonctions) ont un attribut __proto__ (prototype implicite), et la valeur de l'attribut est un objet ordinaire

-Toutes les fonctions Il y a un attribut prototype (show prototype), et la valeur de l'attribut est également un objet ordinaire

- tous les types de référence (objets, tableaux, fonctions), la valeur de l'attribut __proto__ pointe vers la valeur de l'attribut "prototype" de son constructeur, c'est-à-dire

var obj = {}; ==> var obj = new Object();

console.log(obj.__proto__ === Object.prototype)

-Lorsque vous essayez d'obtenir les attributs d'un objet, si l'objet lui-même n'a pas cet attribut, il cherchera la chaîne prototype

var item;
for(item in f){
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是在这里建议大家加上这个判断,保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item);
}
}
Copier après la connexion

dans son __proto__ (c'est-à-dire le prototype de son constructeur) :

Écrivez un exemple d'encapsulation de requête DOM :

function 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,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
//如果添加return this,后边还可以接链式操作
}
var p1 = new Elem('p1');
//console.log(p1.html());//打印HTML即DOM结构;
//赋值内容并且绑定事件
p1.html(&#39;<p>hello imooc</p>&#39;);
p1.on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
})
//链式操作
p1.html(&#39;<p>hello imooc</p>&#39;).on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
}).html(&#39;<p>javascript</p>&#39;);
instanceof:
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;
Copier après la connexion

1 Comment déterminer avec précision si une variable est un type de tableau ?

Instance variable de tableau

2. Écrivez un exemple d'héritage de chaîne de prototype

//动物
function Animal(){
this.eat = function(){
console.log(&#39;animal eat&#39;);
}
}
//狗
function Dog(){
this.bark = function(){
console.log(&#39;dog bark&#39;);
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = &#39;class1&#39;
//return this;
}
var f = new Foo(&#39;zhangsan&#39;,20);
//var f1 = new Foo(&#39;lisi&#39;,22);
Copier après la connexion

-Créez un nouvel objet

-ce pointez sur ceci. new Object

- exécuter du code, c'est-à-dire attribuer une valeur à ceci

- renvoyer ceci

4. Comment utiliser la chaîne de prototypes dans zepto (ou autre framework) le code source ?

-La lecture du code source est un moyen efficace d'améliorer les compétences

-Mais on ne peut pas « se plonger dans un travail acharné » et y avoir des compétences

-Rechercher « Conception de zepto et analyse du code source » sur MOOC.com «

Recommandations associées :

Explication détaillée des prototypes et des chaînes de prototypes en JavaScript_Connaissances de base

Comprendre les prototypes et les chaînes de prototypes en JavaScript_ Connaissances de base

Apprendre le javascript orienté objet en comprenant les compétences javascript prototype et prototype chain_javascript

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!