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!
