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

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);创建多个对象

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);
}
}

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;

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('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = 'class1'
//return this;
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);

-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!