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('<p>hello imooc</p>'); p1.on('click',function(){ alert('clicked'); }) //链式操作 p1.html('<p>hello imooc</p>').on('click',function(){ alert('clicked'); }).html('<p>javascript</p>'); 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 :
Comprendre les prototypes et les chaînes de prototypes en JavaScript_ Connaissances de base
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!