Grundkonzept des Prototyps eines Objektobjekts in JS

In diesem Artikel geht es um die Grundlagen des JS-Lernens und das Erlernen des Prototypkonzepts von Objektobjekten. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es hilft allen.

Objektkonzept

In JavaScript sind alle Referenztypen Objekte. Wie in function Foo () {} ist Foo selbst ein Verweis auf ein Objekt.

Objektmethode erstellen, Literalmethode, neuer Konstruktor, Funktionsdeklaration Object.create

Literalobjekt

Schnelle Erstellung von Instanzen von Objekten auf Javascript-Sprachniveau

var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量
var obj2 = [obj, 'foo', 'bar']; // Array数组字面量
var obj3 = /^[a-zA-Z0-9]$/; // RegExp正则字面量
var obj4 = function(){}; // Function函数字面量

neuer Konstruktor

Über den Konstruktor des integrierten Objekts oder eine benutzerdefinierte Funktion. Mit dem new-Operator wird ein Objekt erstellt und die Konstruktormethode ausgeführt.

var obj = new Object();
var obj2 = new Array(1000);
var obj3 = new RegExp('^[a-zA-Z0-9]$');
var obj4 = new Function('a', 'b', 'return a + b;');

Funktionsdeklaration

Das durch die Funktionsdeklaration erstellte Objekt. Funktionen sind spezielle Objekte.

function Foo() {}
Foo instanceof Object;
Foo instanceof Function;

Object.create

Übergeben Sie ein Objekt als Prototyp des zurückgegebenen Objekts, erstellen Sie ein neues Objekt und zeigen Sie auf den Prototyp des neues Objekt zu dem in das Objekt übergebenen Objekt.

var foo = {
 'foo': 'foo',
 'bar': 'bar'
};
var o = Object.create(foo); // o.__proto__ = foo
console.log(o.foo); // o.__proto__.foo

Verwenden Sie Object.create(null), um ein Literalobjekt zurückzugeben.

var o = Object.create(null);
o instanceof Object; // return false;
o.toString(); // Uncaught TypeError

Objekt Prototyp

Jedes Objekt verfügt über ein integriertes __proto__-Attribut, das auf das Funktionsattribut prototype verweist, das es erstellt. Das

prototype.constructor des Konstruktors zeigt auf den Konstruktor Dieses Leben . Der Prozess der Suche nach den Attributen eines Objekts besteht aus den folgenden Teilen:

Suche nach dem Datendeskriptor (schreibbar, Wert) oder Zugriffsdeskriptor (Getter, Setter) des Objektattributs, wenn die Abfrage es findet , den entsprechenden Wert zurückgeben. Wenn die Abfrage nicht gefunden werden kann, fahren Sie mit Schritt 2 fort. Prüfen Sie, ob der Wert des Objektattributs explizit definiert ist (erkennbar an Object.getOwnPropertyNames). Wenn das Objektattribut definiert ist, wird der definierte Wert zurückgegeben. Wenn nicht, fahren Sie mit Schritt 3 fort. Finden Sie den versteckten Prototyp des Objekts__proto__Die Eigenschaften des Objekts und die Regeln sind dieselben wie in den Schritten 1 und 2. Wenn es noch nicht gefunden wurde, wiederholen Sie Schritt 3, bis __proto__ null ist.

Der spezifische Fall ist in der folgenden Abbildung dargestellt:

Objektprototyp erkennen

Testen eines Objekts in seine Prototypkette Ob es ein Prototypattribut eines Konstruktors in

instanceof Object.prototype.isPrototypeOf

instanceof

Operator gibt, Erkennung auf Sprachebene Prototyp des Objekts Ob die Kette den Prototyp des Konstruktors enthält

function Foo () {}
Foo instanceof Function; // return true
Foo instanceof Object; // return true

Mockinstanceof Findet heraus, ob der Konstruktor der Prototypenkette des Objekts den übergebenen Konstruktor < enthält 🎜> In einigen bestimmten Browsern wird Benutzern das Funktionsattribut des Prototypobjekts des Konstruktors __proto__

function Bar () {}
function isInstanceof (obj, Constructor) {
 if (obj === null) {
 return false;
 }
 // 忽略 string, number, boolean, null, undefined 类型干扰
 if (!~['object', 'function'].indexOf(typeof obj)) {
 return false;
 }

 var prototype = obj.__proto__;
 while(prototype) {
 if (prototype.constructor === Constructor) {
  return true;
 }
 prototype = prototype.__proto__;
 }
 return false;
}
isInstanceof(Bar, Function);
isInstanceof(Bar, Object);

isPrototypeOf

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);

__proto__

var o = {};
var prototype = Object.getPrototypeOf(o);
console.log(prototype === Object.prototype); // return true
// 部分浏览器有效
var o2 = {};
console.log(o2.__proto__ === Object.prototype); // return true

Object.create

function Foo () {}
 function Bar () {}
 Foo.prototype.foo = 'foo';
 Bar.prototype = Object.create(Foo.prototype); 
 Bar.prototype.constructor = Bar; // 修正原型链的constructor
 var o = new Bar();
 console.log(o.foo); // return foo;
 console.log(o instanceof Bar); // return true

Object.setPrototypeOf

__proto__

function Foo () {}
 Foo.prototype.name = 'foo';
 var o = Object.create(null);
 Object.setPrototypeOf(o, Foo.prototype);
 console.log(o.name); // return foo

Verwandt Empfehlungen:

Zusammenfassung der Dinge, die Sie über Object-Objekte beachten sollten

Beispielcode, der das Object-Objekt in JavaScript im Detail erklärt

jQuery serialisiert das Formular in eine Instanz eines Object-Objekts

Das obige ist der detaillierte Inhalt vonGrundkonzept des Prototyps eines Objektobjekts in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!