Detaillierte Erläuterung des JS-Prototyps und der Prototypenkette

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(&#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. 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:

Prototypen und Prototypketten in JavaScript verstehen_ Grundkenntnisse

Erlernen Sie das objektorientierte Verstehen von Javascript-Prototypen und Prototypketten_Javascript-Fähigkeiten

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!