


Was ist der js-Konstruktor? Unterscheidet es sich von gewöhnlichen Funktionen? In diesem Artikel wird hauptsächlich die Vererbung von js-Konstruktoren (Klassenvererbung) vorgestellt und auch die beiden Vererbungsmethoden von ES5 und ES6 vorgestellt. Wenn der Artikel unangemessene Teile enthält, können Sie mich gerne korrigieren.
js-Konstruktor
Prototyp
Lassen Sie uns zunächst kurz die Instanzattribute/-methoden und Prototypattribute/-methoden vorstellen, um das Folgende besser zu verstehen
function Persion(name){ this.name = name; // 属性 this.setName = function(nameName){ // 实例方法 this.name = newName; } } Persion.prototype.sex = 'man'; // 向 Persion 原型中追加属性(原型方法) var persion = new Persion('张三'); // 此时我们实例化一个persion对象,看一下name和sex有什么区别
Persistenz in der Konsole anzeigen und wie folgt ausdrucken: Die ursprünglich durch den Prototyp hinzugefügten Attribute werden in der Prototypenkette des Instanzobjekts angezeigt
Jeder Das Objekt verfügt über ein integriertes Proto-Objekt. Wenn ein Attribut im aktuellen Objekt nicht gefunden wird, wird es in seiner Prototypenkette (d. h. Prototypenkette) durchsucht
Lassen Sie uns Schauen Sie sich das folgende Beispiel an
Hinweis: Im Konstruktor gibt es im Allgemeinen nur wenige Referenzattribute in Form von Arrays. In den meisten Fällen handelt es sich um: Basisattribute + Methoden.
function Animal(n) { // 声明一个构造函数 this.name = n; // 实例属性 this.arr = []; // 实例属性(引用类型) this.say = function(){ // 实例方法 return 'hello world'; } } Animal.prototype.sing = function() { // 追加原型方法 return '吹呀吹呀,我的骄傲放纵~~'; } Animal.prototype.pArr = []; // 追加原型属性(引用类型)
Als nächstes werfen wir einen Blick auf den Unterschied zwischen Instanzeigenschaften/-methoden und Prototypeigenschaften/-methoden
Der Zweck des Prototypobjekts besteht darin, gemeinsame Methoden und Eigenschaften für jedes Instanzobjekt zu speichern ist nur ein ganz gewöhnliches Objekt. Und alle Instanzen nutzen dasselbe Prototypobjekt, sodass es im Gegensatz zu Instanzmethoden oder -eigenschaften nur eine Kopie des Prototypobjekts gibt. Es gibt viele Instanzen und Instanzeigenschaften und -methoden sind unabhängig.
var cat = new Animal('cat'); // 实例化cat对象 var dog = new Animal('dog'); // 实例化狗子对象 cat.say === dog.say // false 不同的实例拥有不同的实例属性/方法 cat.sing === dog.sing // true 不同的实例共享相同的原型属性/方法 cat.arr.push('zz'); // 向cat实例对象的arr中追加元素;(私有) cat.pArr.push('xx'); // 向cat原型对象的pArr中追加元素;(共享) console.log(dog.arr); // 打印出 [],因为cat只改变了其私有的arr console.log(dog.pArr); // 打印出 ['xx'], 因为cat改变了与狗子(dog)共享的pArr
Natürlich sind die Prototypattribute grundlegende Datentypen und werden nicht geteilt
Im Konstruktor: für den Datenschutz von Attributen (Instanz-Basisattribute) und Methoden (Instanzreferenzattribute) wiederverwenden und teilen. Wir empfehlen:
1. Eigenschaften in Konstruktoren kapseln
2. Methoden für Prototypobjekte definieren
ES5-Vererbungsmethode
Zuerst definieren wir eine Animal-Elternklasse
function Animal(n) { this.name = n; // 实例属性 this.arr = []; // 实例属性(引用类型) this.say = function(){ // 实例方法 return 'hello world'; } } Animal.prototype.sing = function() { // 追加原型方法 return '吹呀吹呀,我的骄傲放纵~~'; } Animal.prototype.pArr = []; // 追加原型属性(引用类型)
1. Prototypenkettenvererbung
function Cat(n) { this.cName = n; } Cat.prototype = new Animal(); // 父类的实例作为子类的原型对象 var tom = new Cat('tom'); // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性,实现了继承 var black = new Cat('black'); tom.arr.push('Im tom'); console.log(black.arr); // 打印出 ['Im tom'], 结果其方法变成了共享的,而不是每个实例所私有的,这是因为父类的实例方法/属性变成了子类的原型方法/属性了;
Vorteile: Das untergeordnete Objekt realisiert die Vererbung der Instanzmethoden/-eigenschaften und Prototypmethoden/-eigenschaften des übergeordneten Objekts;
Nachteile: Unterklasseninstanzen teilen sich die Referenzdatentypattribute des übergeordneten Klassenkonstruktors.
function Cat(n) {
this.cName = n;
Animal.call(this, this.cName); // 核心,把父类的实例方法属性指向子类
}
var tom = new Cat('tom'); // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性,实现了继承
var black = new Cat('black');
tom.arr.push('Im tom');
console.log(black.arr); // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing(); // undefind 无法继承父类的原型属性及方法;
Vorteile:
1. Implementierung der Instanzmethoden/-eigenschaften des übergeordneten Objekts Objektvererbung, die von jeder Unterklasseninstanz geerbten Methoden und Attribute sind privat
2. Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben >Nachteile: Unterklasseninstanzen können die Konstruktionsattribute und -methoden der übergeordneten Klasse nicht erben.
3. Kombinationsvererbung
function Cat(n) { this.cName = n; Animal.call(this, this.cName); // 核心,把父类的实例方法属性指向子类 } Cat.prototype = new Parent() // 核心, 父类的实例作为子类的原型对象 Cat.prototype.constructor = Cat; // 修复子类Cat的构造器指向,防止原型链的混乱 tom.arr.push('Im tom'); console.log(black.arr); // 打印出 [], 其方法和属性是每个子类实例所私有的; tom.sing(); // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性
Vorteile:
1. Beim Erstellen einer Unterklasseninstanz können Sie Parameter an den Konstruktor der übergeordneten Klasse übergeben.
2. Die Instanzmethode der übergeordneten Klasse wird im Prototypobjekt der übergeordneten Klasse definiert ;
3. Den Konstruktor und die Attribute der übergeordneten Klasse nicht teilen.
Nachteil: Der Konstruktor der übergeordneten Klasse wird zweimal aufgerufen 🎜>
4. Parasitäre KombinationsvererbungVorteile:
2. Instanzen von Unterklassen teilen sich nicht den Konstruktor und die Attribute der übergeordneten Klasse.
3
Nachteile: Die übergeordnete Klasse und die untergeordnete Klasse verwenden denselben Prototyp, wodurch sich die Prototypänderung der untergeordneten Klasse auf die Vererbung der parasitären Kombination auswirkt (einfach). perfekt) function Cat(n) {
this.cName = n;
Animal.call(this, this.cName); // 核心,把父类的实例方法属性指向子类
}
Cat.prototype = Parent.prototype; // 核心, 将父类原型赋值给子类原型(子类原型和父类原型,实质上是同一个)
Cat.prototype.constructor = Cat; // 修复子类Cat的构造器指向,防止原型链的混乱
tom.arr.push('Im tom');
console.log(black.arr); // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing(); // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性
tom.pArr.push('publish'); // 修改继承于父类原型属性值 pArr;
console.log(black.pArr); // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的,
// 至此简直是完美呀~~~ 然鹅!
Cat.prototype.childrenProp = '我是子类的原型属性!';
var parent = new Animal('父类');
console.log(parent.childrenProp); // 打印出'我是子类的原型属性!' what? 父类实例化的对象拥有子类的原型属性/方法,这是因为父类和子类使用了同一个原型
Vorteile: Perfekte Implementierung der Vererbung;
Nachteile: Relativ komplexe Implementierung
function Cat(n) {
this.cName = n;
Animal.call(this, this.cName); // 核心,把父类的实例方法属性指向子类;
}
var F = function(){}; // 核心,利用空对象作为中介;
F.prototype = Parent.prototype; // 核心,将父类的原型赋值给空对象F;
Cat.prototype = new F(); // 核心,将F的实例赋值给子类;
Cat.prototype.constructor = Cat; // 修复子类Cat的构造器指向,防止原型链的混乱;
tom.arr.push('Im tom');
console.log(black.arr); // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing(); // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性;
tom.pArr.push('publish'); // 修改继承于父类原型属性值 pArr;
console.log(black.pArr); // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的;
Cat.prototype.childrenProp = '我是子类的原型属性!';
var parent = new Animal('父类');
console.log(parent.childrenProp); // undefind 父类实例化的对象不拥有子类的原型属性/方法;
bedeutet für Kinder Das Objekt legt ein Uber-Attribut fest, das direkt auf das Prototypattribut des übergeordneten Objekts verweist. (Uber ist ein deutsches Wort, das „oben“ oder „eine Ebene höher“ bedeutet.) Dies entspricht dem Öffnen eines Kanals für das untergeordnete Objekt, und Sie können die Methode des übergeordneten Objekts direkt aufrufen. Diese Zeile wird hier nur platziert, um die Vollständigkeit der Vererbung zu gewährleisten, und dient ausschließlich Sicherungszwecken. ES6-Vererbungsmethode
function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; hild.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; } // 使用 extend(Cat,Animal);Apache PHP MySQLVerwandte Artikel
Vererbungsmethode des PHP-Konstruktors, PHP-KonstruktorvererbungChild.uber = Parent.prototype;
Ähnliche Videos:
Geek Academy PHP Object-Oriented Video Tutorial
Das obige ist der detaillierte Inhalt vonWas ist ein JS-Konstruktor? Detaillierte Erläuterung der Konstruktor-Vererbungsmethoden und ihrer Vor- und Nachteile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools

MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Dreamweaver CS6
Visuelle Webentwicklungstools

Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor

SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
