Zusammenfassung des JavaScript-Lernens von Prototypobjekten (organisiert und geteilt)

Dieser Artikel vermittelt Ihnen relevantes Wissen über Prototypobjekte in JavaScript. Ich hoffe, er wird Ihnen hilfreich sein.

Klassen, die du verstehst? Was sind die Merkmale von Klassen? (Kapselung, Vererbung, Polymorphismus)

Eine Klasse ist eigentlich eine „Sonderfunktion“. Genau wie die Funktionsausdrücke und Funktionsdeklarationen, die Sie definieren können, besteht auch die Klassensyntax aus zwei Komponenten: Klassendeklaration und Klassenausdrucksmodus. Der Hauptteil der Klasse wird im strikten Modus ausgeführt.

Der Klassenkörper einer Klasse ist der von einem Paar geschweifter Klammern {} umschlossene Teil, in dem die Klassenmitglieder definiert werden. [Mitglieder sind hauptsächlich Methoden oder Konstruktoren]

Alle Methoden einer Klasse sind gleichwertig und werden im Prototypattribut der Klasse definiert. Der Aufruf einer Methode für eine Instanz einer Klasse entspricht dem Aufruf einer Methode für den Prototyp.

class A(){
    constructor(){}
    a(){}
    b(){}
}
//等价于
A.prototype={constructor(){},a(){},b(){}}

Zusammensetzung:

• Konstruktor:

Die Konstruktormethode ist eine spezielle Methode, die zum Erstellen und Initialisieren eines von einer Klasse erstellten Objekts verwendet wird. Eine Klasse kann nur einen Konstruktor haben, es wird ein Fehler gemeldet. Wenn kein Konstruktor vorhanden ist, wird standardmäßig ein leerer Konstruktor hinzugefügt. Der Konstruktor gibt standardmäßig das echte Spaltenobjekt [dh dieses] zurück. Ein Konstruktor kann das Schlüsselwort super verwenden, um den Konstruktor einer übergeordneten Klasse aufzurufen.

• Attribute

• Prototyp-Methode: Bei dieser Methode muss das Funktionsschlüsselwort nicht hinzugefügt werden, sondern nur die Definition der Funktion direkt eingegeben werden. Zur Trennung von Methoden dürfen keine Kommas verwendet werden, andernfalls wird ein Fehler gemeldet.

• Statische Methode: Verwenden Sie statische Methode, um eine statische Methode zu definieren und eine statische Methode aufzurufen. Sie kann nicht von der Instanz der Klasse aufgerufen werden, sondern nur mithilfe der Klasse.

• Wertfunktions-Getter und Speicherfunktions-Setter: Verwenden Sie die Schlüsselwörter get und set in der Klasse, um die Speicher- und Wertfunktionen für ein bestimmtes Attribut festzulegen und das Zugriffsverhalten des Attributs abzufangen.

Klassensyntax:

• Klassendeklaration: Verwenden Sie das Klassenschlüsselwort

class Rectangle{
    constructor(height,width){
        this.height=height;
        this.width=width;
    }
}

Hinweis: Der Unterschied zwischen Funktionsdeklaration und Klassendeklaration: Klassendeklaration wird nicht heraufgestuft, Funktionsdeklaration wird heraufgestuft.

Klassenausdrücke: Klassenausdrücke können benannt oder anonym sein. Der einem benannten Klassenausdruck gegebene Name ist der lokale Name des Klassenkörpers.

 let Rectangle=class{//匿名类
      constructor(height,width){
            this.height=height;
            this.width=width;
        }
 }
 let Rectangle= class Rectangle{//命名类
      constructor(height,width){
            this.height=height;
            this.width=width;
        }
 }

Unterklassen mit Extends erstellen: Das Schlüsselwort „extends“ wird in einer Klassendeklaration oder einem Klassenausdruck verwendet, um eine Klasse als Unterklasse einer anderen Klasse zu erstellen.

Verwenden Sie super, um die Superklasse aufzurufen:

Das Schlüsselwort super wird zum Aufrufen von Funktionen für das übergeordnete Objekt des Objekts verwendet.

Merkmale der Klasse: - Kapselung: Hauptsächlich durch die Einstellung von Funktionen, Private Eigenschaften und Methoden. Dies wird durch den Bereich auf Blockebene erreicht.

– Polymorphismus: Kann über Funktionen aufgerufen werden, da die Parameter geändert werden können.

– Vererbung: Hauptsächlich über die Prototypenkette.

Was passiert, wenn wir eine Normalität neu erstellen? Funktion?

Erstellen Sie ein neues Objekt unter Verwendung des Prototypattributs des Konstruktors (beachten Sie den Unterschied zum privaten Feld [[prototype]]) als Prototyp.
Übergeben Sie dies und die aufrufenden Parameter an den Konstruktor und führen Sie es aus.
Wenn der Konstruktor ein Objekt zurückgibt, geben Sie es zurück, andernfalls geben Sie das im ersten Schritt erstellte Objekt zurück.

neu Diese Art von Verhalten versucht, die Syntax von Funktionsobjekten der von Klassen zu ähneln. Es bietet jedoch objektiv zwei Möglichkeiten: Eine besteht darin, Attribute im Konstruktor hinzuzufügen, und die andere darin, Attribute zum Prototypattribut hinzuzufügen des Konstruktors hinzufügen.

Muss der Funktionsname nach new großgeschrieben werden?

Nein, es dient hauptsächlich der Vereinfachung der Klassifizierung. Allgemeine Einschränkungen sind Großbuchstaben

Wie versteht man unter ProtoType den Prozess, ein bestimmtes Attribut eines Objekts zu finden?

Prototyp:

Jede Funktion verfügt über ein spezielles Attribut namens Prototypobjekt [Prototyp]

js ist eine prototypbasierte Sprache, und das Objekt verwendet seinen Prototyp als Vorlage Methoden und Eigenschaften aus dem Prototyp. Diese Eigenschaften und Methoden werden im Prototypattribut über dem Konstruktor des Objekts definiert, nicht in der Objektinstanz selbst.

Prototypobjekte können Prototypobjekte haben und von ihnen Methoden und Eigenschaften erben, Schicht für Schicht, Schicht für Schicht, bis das Prototypobjekt eines Objekts null ist. Dies ist die Prototypenkette.

Beim Erstellen einer Objektinstanz wird eine Verknüpfung zwischen der Objektinstanz und ihrem Konstruktor [__proto__-Attribut hergestellt, das vom Prototypattribut des Konstruktors abgeleitet wird. Das heißt, __proto__ und der Prototyp des Konstruktors zeigen auf dasselbe Objekt] Object.getPrototypeof(new Foobar()) und Foobar.prototype sind gleich.

Object.create(). Erstellt ein neues Objekt aus dem angegebenen Prototypobjekt. var newObj=Object.create(obj). Dann ist newObjs __proto__=obj

Jedes reale Spaltenobjekt erbt ein Konstruktorattribut vom Prototyp. Diese Eigenschaft verweist auf den Konstruktor, der diese Instanz erstellt.

Im Allgemeinen werden Attribute im Konstruktor und Methoden im Prototyp definiert.

一般由构造函数实列化出一个新对象，新对象的原型对象是一个constructor和一个Object的原型对象组成。而函数构造函数的原型对象是也是由另外一个constructor和一个Function的原型对象组成。

    var F=function(){};
    Object.prototype.a=function(){};
    Function.prototype.b=function(){};
    var f=new F();
    //上面的结果是，f能取到a,不能取到b.
    详解：
        1.f.__proto__===F.prototype
        2.F.prototype.__proto__===Object.prototype(所以f可以访问a)
        3.f.constructor===F
        4.F.__proto__===Function.prototype(所以f.constructor.b可以访问)

查找属性的过程：

1.先查找自己身属性是否由包含该属性。

2.如果没有，才会沿着原型链，层层向上搜索，直到找到名字的属性

3.如果找到最后原型链的末尾，即最后的原型为null，那就是没有找到该属性。就会返回undefined

不同方法创建对象和原型链

1.使用语法结构创建对象

var o = {a: 1};
// o 这个对象继承了 Object.prototype 上面的所有属性
// o 自身没有名为 hasOwnProperty 的属性
// hasOwnProperty 是 Object.prototype 的属性
// 因此 o 继承了 Object.prototype 的 hasOwnProperty
// Object.prototype 的原型为 null
// 原型链如下:
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// 数组都继承于 Array.prototype 
// (Array.prototype 中包含 indexOf, forEach 等方法)
// 原型链如下:
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// 函数都继承于 Function.prototype
// (Function.prototype 中包含 call, bind等方法)
// 原型链如下:
// f ---> Function.prototype ---> Object.prototype ---> null

2.使用构造函数创建对象

function A() {
this.a = 1;
this.b = 2;
}
A.prototype = {
write: function(){
    console.log(this.a);
}
};
var a = new A();
// a 是生成的对象，他的自身属性有 'a' 和 'b'。

3.使用Object.create()创建对象(ES5)

var a = {a: 1}; 
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype
使用

4.使用class创建对象(ES6)

class A {
constructor(a, b) {
    this.a = a;
    this.b = b;
}
}
class B extends A {
constructor(a,b,c) {
    super(a, b);
    this.c=c;
}
get ab() {
    return this.a + this.b;
}
set d(d) {
    this.a = d;
    this.b = d;
    this.c = d;
}
}
var a= new A('a','b');//a的原型对象是 A.prototype
var b = new B('a','b','c');//    //b的原型对象是 B.prototype

当一个对象设置属性时都发生了什么？

如果对象包含普通数据访问属性，直接赋值只会修改属性值

    var a={b=1}//因为b是a的普通属性，数据类型为Number

    a.b="a"；  //直接更改b的类型为String,且赋值为'a'.

如果对象找不到该属性，且原型链也找不到，就直接默认添加一个属性到该对象上。

    var a={}//b不是a的普通属性，且原型链上也没有

    a.b="a"；  //直接在a上添加b的类型，为String,且赋值为'a'.

如果属性b，存在于原型链上

//在原型链上层存在名为b的普通数据访问属性并且没有标记为只读(writable:false)，那就会直接在a中添加一个名为b的新属性,且值为'a'。而原型链上的b就会被屏蔽掉：

    function A(){};
    A.prototype.b=1;
    var a=new A();
    a.b='a';

//在原型链上层存在b，但是他被标记为只读，那么无法修改已有属性，或者在a中创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误，否则，这条赋值语句会被忽略，总之，不会发生屏蔽。

    function A(){
    };
A.prototype.b=1
    Object.defineProperty(A.prototype,'b',{
        configurable:true,
        writable:false
    })
    var a=new A();
    a.b='a';//结果a.b还是1

【相关推荐：javascript学习教程】

Das obige ist der detaillierte Inhalt vonZusammenfassung des JavaScript-Lernens von Prototypobjekten (organisiert und geteilt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!