Einführung in die JS-Vererbung

Dieser Artikel stellt hauptsächlich die Einführung der JS-Vererbung vor, die einen gewissen Referenzwert hat. Jetzt kann ich sie mit allen teilen. Freunde in Not können sich darauf beziehen

KlasseA

• besteht aus zwei Teilen: Konstrukteur und Prototyp.

• Als Teil des Konstruktors ist jede Instanz unabhängig.

• Teil des Prototyps, der von jeder Instanz gemeinsam genutzt wird.

// 构造函数
function ClassA(sColor) {
    this.color = sColor;
}

// 原型
ClassA.prototype.sayColor = function () {
    alert(this.color);
};

Generiert eine Instanz

• Interner Vorgang:

1. dies zeigt auf a new { }, der __proto__ dieses Objekts zeigt auf ClassA.prototype.

2. Konstruktor ClassA ausführen.

3. Gibt das { } zurück, auf das hiermit verwiesen wird.

var a = new ClassA();

console.log(a.__proto__ === ClassA.prototype);
// a 的继承对象指向 ClassA
console.log(a.constructor === ClassA);

Vererbung des Prototypteils

function ClassB() {
    // 实现继承 ClassA 构造函数部分的继承
}

ClassB.prototype = new ClassA();
// ClassB.prototype 指向新对象时，原有的 ClassB.constructor 属性会消失。
// new ClassA().hasOwnProperty('constructor') 为 false，新生成的对象无 constructor 属性。
// 在此修复这个问题。
ClassB.constructor = ClassB;
// 不过还存在 new ClassA().hasOwnProperty('color') 为 true 问题
// 实现继承 ClassA 构造函数部分的继承,生成的属性优先级比 new ClassA().color 高，顾可以忽略

Vererbung des Konstruktorteils – Objektidentitätswechsel

1. Put ClassA Wenn ClassB als Methode eingeführt wird, haben beide dies gemeinsam.

2. Konstruktor ClassA ausführen.

3. Vorläufige Einführung löschen.

function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

Vererbung des Konstruktorteils – apply/call/bind

• Es handelt sich um eine Funktionsimplementierung des Objektidentitätswechsels

• Binden Sie dies von KlasseB an das von KlasseA und führen Sie den Konstruktor KlasseA aus.

function ClassB(sColor) {
    ClassA.call(this, sColor);
    // 以下两种方式效果一样，只是实现方式不同
    // ClassA.apply(this, [sColor]);
    // ClassA.bind(this, sColor)();
}

Vererbung

• Vererbung besteht aus zwei Teilen: Konstruktor-Vererbung und Prototyp-Vererbung. Sie können eine beliebige Kombination von Vererbungsmethoden wählen.

• Das Attribut --constructor im Prototyp des Konstruktors zeigt immer auf den Konstruktor selbst. Wenn es während der Vererbung geändert wurde, korrigieren Sie es bitte am Ende.

• Vererbung behält die ursprünglichen Eigenschaften bei, sodass Sie neue Konstruktoren oder Prototypeigenschaften nach der Vererbung erweitern können.

Vererbung des Datums

// 需要考虑polyfill情况
Object.setPrototypeOf = Object.setPrototypeOf ||
    function(obj, proto) {
        obj.__proto__ = proto;
        return obj;
    };
/**
 * 用了点技巧的继承，实际上返回的是Date对象
 */
function MyDate() {
    // bind属于Function.prototype，接收的参数是：object, param1, params2...
    var dateInst = new(Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
    // 更改原型指向，否则无法调用MyDate原型上的方法
    // ES6方案中，这里就是[[prototype]]这个隐式原型对象，在没有标准以前就是__proto__
    Object.setPrototypeOf(dateInst, MyDate.prototype);
    dateInst.abc = 1;
    return dateInst;
}
// 原型重新指回Date，否则根本无法算是继承
Object.setPrototypeOf(MyDate.prototype, Date.prototype);
MyDate.prototype.getTest = function getTest() {
    return this.getTime();
};
let date = new MyDate();
// 正常输出，譬如1515638988725
console.log(date.getTest());

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Native JS schreibt Ajax-Anfragefunktionsfunktion

Das obige ist der detaillierte Inhalt vonEinführung in die JS-Vererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!