Vertieftes Verständnis von JavaScript-Prototypen (Bild)

Prototypen verstehen

Ein Prototyp ist ein Objekt, über das andere Objekte die Eigenschaftsvererbung implementieren können. Jedes Objekt kann standardmäßig zu einem Prototyp werden. Da der Prototyp selbst auch ein Objekt ist, verfügt jeder Prototyp selbst über einen Prototyp. Jedes Objekt verfügt über ein Prototypattribut, aufgezeichnet als: __proto__. Immer wenn wir ein Objekt definieren, verweist sein __proto__-Attribut auf seinen Prototyp. Ein Beispiel lautet wie folgt:

var foo = { 
x: 10, 
y: 20 
};

Dieses Attribut wird auch dann reserviert, wenn wir keinen Prototyp angeben. Wenn wir einen klaren Zeiger haben, wird die verknüpfte Liste verbunden. Es ist zu beachten, dass der Prototyp selbst auch einen Zeiger hat, der das fortschrittlichste Objekt ist.Prototyp. Ein Beispiel ist wie folgt:

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; 

var c = { 
y: 30, 
__proto__: a 
}; 

// call the inherited method 
b.calculate(30); // 60

Prototypen verwenden

Nachdem wir die Prinzipien von Prototypen verstanden haben, wie werden Prototypen verwendet? Mit anderen Worten: Welche Rolle spielen Prototypen?

Allgemeine Anfänger verwenden die funktionsorientierte Programmierung, nachdem sie gerade die grundlegende JavaScript-Syntax erlernt haben. Der folgende Code:

var decimalDigits = 2,
	tax = 5;

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

//alert(add(1, 3));

Erhalten Sie das Endergebnis, indem Sie jede Funktion ausführen. Aber mithilfe von Prototypen können wir einen Teil unseres Codes optimieren, indem wir den Konstruktor verwenden:

Zunächst werden nur Variablen im Funktionskörper gespeichert:

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};

Seine spezifische Methode Legen Sie es über das Prototypattribut fest:

Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },

    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));

Auf diese Weise können Sie entsprechende Funktionsoperationen ausführen, indem Sie das Objekt instanziieren. Dies ist auch die Methode, die von allgemeinen JS-Frameworks verwendet wird. Eine weitere Funktion des

-Prototyps besteht darin, die Vererbung zu implementieren. Definieren Sie zuerst das übergeordnete Objekt:

var BaseCalculator = function() {
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

Definieren Sie dann das untergeordnete Objekt und verweisen Sie den Prototyp des untergeordneten Objekts auf die Instanziierung des übergeordneten Elements:

var Calculator = function () {
    //为每个实例都声明一个税收数字
    this.tax = 5;
};

Calculator.prototype = new BaseCalculator();

Das können wir sehen Der Prototyp von Calculator zeigt auf eine Instanz von BaseCalculator. Der Zweck besteht darin, Calculator seine beiden Funktionen add(x,y) und subtract(x,y) integrieren zu lassen Instanz von BaseCalculator. Unabhängig davon, wie viele Calculator-Objektinstanzen Sie erstellen, verweisen ihre Prototypen auf dieselbe Instanz.

Nachdem wir den obigen Code ausgeführt haben, können wir sehen, dass auf den Attributwert decimalDigits zugegriffen werden kann, da der Prototyp von Calculator auf die Instanz von BaseCalculator verweist. Wenn ich nicht möchte, dass Calculator auf den Konstruktor von BaseCalculator zugreift Deklarierter Attributwert, was soll ich tun? Richten Sie Calculator einfach auf den Prototyp von BaseCalculator statt auf die Instanz. Der Code lautet wie folgt:

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

Bei der Verwendung von Bibliotheken von Drittanbietern können die von ihnen definierten Prototypmethoden unsere Anforderungen manchmal nicht erfüllen, sodass wir einige Methoden selbst hinzufügen können. Der Code lautet wie folgt:

//覆盖前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

Prototypkette

Der Prototyp des Objekts zeigt auf das übergeordnete Element des Objekts, und der Prototyp des übergeordneten Elements zeigt auf das übergeordnete Element. Diese Beziehung auf Prototypebene wird Prototypkette genannt.

Bei der Suche nach den Eigenschaften eines Objekts durchläuft JavaScript die Prototypenkette nach oben, bis es die Eigenschaft mit dem angegebenen Namen findet. Wenn die Suche den Anfang der Prototypenkette erreicht, also Object.prototype, Die angegebene Eigenschaft wurde immer noch nicht gefunden. Die Eigenschaft wird undefiniert zurückgegeben.

Das Beispiel lautet wie folgt:

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}

foo.prototype.add = function (x, y) {
    return x + y + 10;
}

Object.prototype.subtract = function (x, y) {
    return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //结果是3，而不是13
alert(f.subtract(1, 2)); //结果是-1

Wir können feststellen, dass Subtrace dem Prinzip des Blicks nach oben folgt, während Add einen Unfall hat. Der Grund dafür ist, dass bei der Suche nach dem Attribut zunächst nach seinen eigenen Attributen gesucht wird. Wenn kein Attribut vorhanden ist, wird dann nach dem Prototyp gesucht.

Apropos Object.prototype: Wir müssen eine seiner Methoden erwähnen, hasOwnProperty. Es kann feststellen, ob ein Objekt benutzerdefinierte Eigenschaften anstelle von Eigenschaften in der Prototypenkette enthält. Es ist die einzige Funktion in JavaScript, die Eigenschaften verarbeitet, aber nicht in der Prototypenkette nachschlägt. Der Verwendungscode lautet wie folgt:

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

Um die Beziehung zwischen dem Prototypobjekt und einer Instanz zu bestimmen, muss die isPrototyleOf-Methode eingeführt werden. Die Demonstration lautet wie folgt:

alert(Cat.prototype.isPrototypeOf(cat2)); //true

Das obige ist der detaillierte Inhalt vonVertieftes Verständnis von JavaScript-Prototypen (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!