Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des JS-Prototyps und der Prototypenkette

小云云
Freigeben: 2018-03-07 14:29:27
Original
1625 Leute haben es durchsucht

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

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);
}
}
Nach dem Login kopieren

-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;
Nach dem Login kopieren

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

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage