Erklären Sie das Object-Objekt im Detail 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.

Objektkonzept

In JavaScript sind alle Referenztypen Objekte. Beispielsweise ist Foo selbst in der Funktion Foo () {} eine Referenz auf ein Objekt.

Objektmethode erstellen Literalmethode Neuer Konstruktor Funktionsdeklaration Object.create

Literalobjekt

Javascript-Sprachebene zum schnellen Erstellen von Objekten Die Instanz von

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

wird durch den Konstruktor des integrierten Objekts oder eine benutzerdefinierte Funktion übergeben. Mithilfe des new-Operators 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 verweisen Sie den Prototyp des neuen Objekts auf das übergebene 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 Wörterbuchobjekt zurückzugeben

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

Objektprototyp

Jedes Objekt verfügt über ein integriertes __proto__ Das Attribut zeigt auf das Attribut prototype der Funktion, die es erstellt hat. Das

prototype.constructor des Konstruktors zeigt auf den Konstruktor selbst. 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 die gleichen 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

MockinstanceofSchaut nach, ob der Konstruktor der Prototypenkette des Objekts den übergebenen Konstruktor enthält, __proto__ wird dem Benutzer in einer bestimmten Weise angezeigt Browser

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

Das Funktionsattribut, das mit dem Prototypobjekt des Konstruktors geliefert wird und verwendet wird, um zu erkennen, ob sich in der Prototypkette ein Prototypobjekt des Konstruktors befindet des Zielobjekts.

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

Holen Sie sich den Objektprototyp Object.getPrototypeOf __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

Setzen Sie den Objektprototyp Object.create Object.setPrototypeOf

Object.create

Ein Objekt zurückgeben und seinen Prototyp festlegen

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

Impliziten Prototyp des Objekts direkt festlegen__proto__

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

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Aktualisieren Sie die Seite. Vuex-Daten verschwinden nicht und die Seite springt nicht. Problem (ausführliches Tutorial)

AngularJS bidirektionale Datenbindung Feste Prinzipien (ausführliches Tutorial)

Probleme im Zusammenhang mit der Datenspeicherung und Werterfassung in WeChat-Miniprogrammen

Das obige ist der detaillierte Inhalt vonErklären Sie das Object-Objekt im Detail in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!