In diesem Artikel werden hauptsächlich detaillierte Beispiele für JS-Prototypen und -Prototypenketten vorgestellt, in der Hoffnung, allen zu einem besseren Verständnis des JS-Prototyps und der Prototypenkette zu verhelfen.
Konstruktor (der erste Buchstabe des Funktionsnamens wird großgeschrieben): ähnlich einer Vorlage
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);创建多个对象
Konstruktor – Erweiterung: (alle Referenztypen haben Konstruktoren)
var a = {} ist eigentlich der syntaktische Zucker für var a = new Object()
var a = [] ist eigentlich der syntaktische Zucker für var a = new Array()
function Foo( ){ ...} Tatsächlich ist es var Foo = new Function()
Verwenden Sie „instanceof“, um zu bestimmen, ob eine Funktion ein Referenztypkonstruktor ist
*Prototypregeln und Beispiele: (Prototype Regeln sind lernende Prototypen (die Grundlage der Kette)
5 Prototypregeln:
-Alle Referenztypen (Objekte, Arrays, Funktionen) haben Objekteigenschaften und können frei mit Attributen erweitert werden (außer 'null' )
-Alle Referenztypen (Objekte, Arrays, Funktionen) haben ein __proto__-Attribut (impliziter Prototyp), und der Attributwert ist ein gewöhnliches Objekt
-Alle Funktionen Es gibt eine Prototyp-Attribut (Prototyp anzeigen), und der Attributwert ist auch ein gewöhnliches Objekt
- alle Referenztypen (Objekte, Arrays, Funktionen), der Attributwert __proto__ zeigt auf den Attributwert „Prototyp“ seines Konstruktors. das heißt
var obj = {}; ==> var obj = new Object();
console.log(obj.__proto__ === Object.prototype)
-Wenn Sie versuchen, die Attribute eines Objekts abzurufen und das Objekt selbst dieses Attribut nicht hat, sucht es in seinem __proto__ nach der
var item; for(item in f){ //高级浏览器已经在 for in 中屏蔽了来自原型的属性 //但是在这里建议大家加上这个判断,保证程序的健壮性 if(f.hasOwnProperty(item)){ console.log(item); } }
-Prototypkette (d. h. dem Prototyp von). sein Konstruktor):
Schreiben Sie ein Beispiel für die Kapselung einer DOM-Abfrage:
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. Wie kann man genau bestimmen, ob eine Variable ein Array-Typ ist?
Variable Instanz von Array
2. Schreiben Sie ein Beispiel für die Vererbung von Prototypen
//动物 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);
-Erstellen Sie ein neues Objekt
-zeigen Sie darauf neues Objekt
– Code ausführen, d. Quellcode?
-Das Lesen von Quellcode ist eine effiziente Möglichkeit, Fähigkeiten zu verbessern
-Aber man kann nicht „in harte Arbeit eintauchen“ und Fähigkeiten darin erwerben
-MOOC. com-Suche nach „Zepto-Design und Quellcode-Analyse“ „
Verwandte Empfehlungen:
Detaillierte Erklärung von Prototypen und Prototypketten in JavaScript_GrundkenntnissePrototypen und Prototypketten in JavaScript verstehen_ Grundkenntnisse
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JS-Prototyps und der Prototypenkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!