Detaillierte Erläuterung der Verwendung von js-Prototypen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von JS-Prototypen ausführlich erläutern. Hier sind praktische Fälle.

Was ist ein Prototyp?

In

Javascript ist der Prototyp ein Objekt, und die Vererbung von Eigenschaften kann durch den Prototyp erreicht werden.

    let personBase = new Object()
    personBase.gender = '男'
    let animal = {
        eyeNumber: 2
    }
    let time = function () {
        let timeType = 'seconds'
    }

Drei Objekte wurden oben erstellt und können als Prototyp jeder Funktion verwendet werden.

function Person (age) {
  this.age = age
}
Person.prototype = personBase
let tom = new Person(18)
console.log(tom.age) // 18
console.log(tom.gender) // '男'

ist der Prototyp von personBase. Der Person-Konstruktor erbt also das Person-Attribut von personBase gender

Prototyp: Jedes JavaScript-Objekt (angenommen als A, außer null) wird ihm zugeordnet, wenn es A ist Dieses mit einem anderen Objekt verknüpfte Objekt wird als Prototyp bezeichnet und jedes Objekt „erbt“ Eigenschaften vom Prototyp.

A, wahrscheinlich eine Funktion in den meisten Codierungsszenarien. Funktionen erben standardmäßig von

, d. h. Function ist standardmäßig der Prototyp aller Funktionen. Wenn wir einer Funktion über das Attribut Function ein Prototypobjekt hinzufügen, wird das Prototypobjekt am prototype-Ende der Prototypkette hinzugefügt. Natürlich kann A auch ein anderer 近 Datentyp (Zahl, String, Array, Boolean) sein, wie z. B. der Zahlentyp. Wenn wir eine Variable über die Literalmethode () initialisieren, entspricht dies der Instanziierung eine Variable über die Konstruktormethode (var a = 1), d. h. im Literalmodus erstellte Variablen sind auch Instanzen von var a = new Number(1). So können wir die Vererbung von Number Attributen und Methoden Number durch das prototype-Attribut von realisieren. (Natürlich wird dies nicht empfohlen)

Die Beziehung zwischen Konstruktoren, Instanzen und Prototypen

Der Schlüssel zum Verständnis der Beziehung zwischen diesen drei liegt darin,

, <a href="http://www.php.cn/code/8201.html" target="_blank">Die Verbindung zwischen Proto<code>prototype und <a href="http://www.php.cn/code/8201.html" target="_blank">proto</a>: constructor

在JavaScript中，每个函数都有一个prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（设置实例的proto属性），也就是说，所有实例的原型引用的是构造函数的prototype属性。同时在原型对象中，包含一个"constructor"属性，这个属性对应创建所有指向该原型的实例的构造函数（有点拗口，就是constructor属性指向构造函数）。这三者的关系可以用下面的示例图表示：

所以构造函数通过 prototype 属性指向自己的原型。 构造函数的实例在创建后通过 proto 属性指向构造函数的 prototype 的对象，即实例函数也指向原型。构造函数和实例都通过属性指向了原形。

代码示例：

    function Person () {}
    let manPerson = new Person()
    manPerson.proto === Person.prototype // true
    Person.prototype.constructor === Person // true
    manPerson.constructor === Person.prototype.constructor // true

• manPerson是构造函数Person的实例

• manPerson的proto属性与Person的prototype属性保存的值相等，即他们指向同一个对象原形。

• Person 的原形（Person.prototype）通过constructor属性指向 构造函数 Person ，即 Person和他的原形实现了相互引用

• 实例的constructor属性与原形的constructor属性相等。这里实例的constructor属性是继承自原形的constructor属性。

反过来原型和构造函数是没有指向实例的引用，因为一个构造函数会有N个实例。javascript通过实例的  proto 属性来访问共同的原形。

所有函数都是 Function 构造函数的实例，而且函数也是一个对象
同时函数实例的字面量方式创建 function too(){} 等同于构造函数方式创建 let foo = new Function()

    foo instanceof Function // true
    too instanceof Function // true
    foo.proto === too.proto // true
    foo.proto === Function.prototype // true foo是Function的实例

所以too、foo都是Function的实例，他们的_proto指向的是Function构造函数的原型。

通过上面的示例代码分析，这里主要涉及到 prototype 、proto、constructor 这3个属性的关系。

我们再次梳理一下:

• 对于所有的对象，都有proto属性，这个属性对应该对象的原型

• 对于函数对象，除了proto属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的proto属性）

• 所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数

• 函数对象和原型对象通过prototype和constructor属性进行相互关联

所以上面的关系图其实可以于理解为：

---

题外话：

    Function.prototype === Function.proto

先有鸡还是先有蛋？怎么 Function 作为构造函数 与 Function 作为实例对象的原型相等

在JavaScript中，Function构造函数本身也算是Function类型的实例吗？Function构造函数的prototype属性和proto属性都指向同一个原型，是否可以说Function对象是由Function构造函数创建的一个实例？
相关问题
JavaScript 里 Function 也算一种基本类型？
在JavaScript中，Function构造函数本身也算是Function类型的实例吗？

对于这类问题也可以不用深究。

---

constructor

原型的constructor属性指向对应的构造函数

    function Person() {
    }
    console.log(Person === Person.prototype.constructor); // true

原型链

当理解了原形的概念后，原形链就比较好理解了。

Da jedes Objekt und jeder Prototyp einen Prototyp hat, zeigt der Prototyp des Objekts auf das übergeordnete Element des Objekts und der Prototyp des übergeordneten Elements zeigt auf das übergeordnete Element des übergeordneten Objekts. Diese Prototypen werden Schicht für Schicht verbunden, um einen Prototyp zu bilden Kette. .JavaScript-Objekte verweisen über proto auf Ketten von Prototypobjekten. Das Konzept der Prototypkette ist nicht schwer zu verstehen. Beim Zugriff auf die Eigenschaften eines Objekts wird nicht nur nach dem Prototyp des Objekts gesucht, sondern auch nach dem Prototyp des Objekts Schicht für Schicht, bis ein Attribut gefunden wird, dessen Name das Ende der Prototypenkette erreicht, wird der Wert des Attributs zurückgegeben, wenn es gefunden wird. Andernfalls wird undefind zurückgegeben (das Ende der Prototypenkette ist null).

Bezüglich der Beziehung zwischen den Prototypen verschiedener Datentypen in JavaScript können Sie sich zum Verständnis auf die folgende Abbildung beziehen:

Ich glaube, Sie haben das gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie die Methode und vieles mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von React-router v4

Detaillierte Erläuterung der Schritte zur Konfiguration von selbstsigniertem https Server in NodeJS Express

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von js-Prototypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!