Heim > Web-Frontend > js-Tutorial > Hauptteil

Tiefes Verständnis von js-Objekten

小云云
Freigeben: 2018-03-28 16:57:39
Original
1385 Leute haben es durchsucht


Dieser Artikel vermittelt Ihnen hauptsächlich ein tiefgreifendes Verständnis von js-Objekten. Er verwendet hauptsächlich Code in Kombination mit Text, um ihn mit Ihnen zu teilen.

Objekterstellung

直接量:let obj={x:1};
//具有prototype属性new方式:let obj=new Array();
//具有protope属性Object方法:Object.create(原型);
Nach dem Login kopieren

Abfrage und Einstellung von Objektattributen

let obj={x:1,y:2};
obj.x//1obj["y"]//2
Nach dem Login kopieren

PS: Bei der Abfrage von Attributen, die in einem Objekt nicht vorhanden sind, wird kein Fehler gemeldet. Wenn es sich im Objekt selbst befindet, wird das Zielattribut nicht in den Attributen oder geerbten Attributen gefunden und der Attributzugriffsausdruck gibt undefiniert zurück. Wenn Sie jedoch ein nicht vorhandenes Objekt abfragen, wird ein Fehler gemeldet >Objektattribute löschen

Löschen: Trennen Sie einfach das Attribut vom Objekt und können nur seine eigenen Attribute auf dem Prototypobjekt löschen
let book={name:"黑洞",author:"nd"};delete book.name;
//对象不存在name属性delete book[author];
//对象不存在author属性
Nach dem Login kopieren

Objektattribute erkennen

Objektattribute aufzählen
//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")
Nach dem Login kopieren
Nach dem Login kopieren

Dateneigenschaften und Accessor-Eigenschaften in Js
let obj=Object.create({x:1});//for/in
//(所有可枚举的自有属性与继承属性)for(item in obj){   
 //属性名赋值给循环变量}//Object.keys()
 //(对象的可枚举自有属性)Object.keys(obj)
 //返回一个数组,数组是由对象的属性组成的
 //Object.getOwnPropertyName()
 //(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
Nach dem Login kopieren

In JavaScript werden die Eigenschaften von Objekten in zwei Typen unterteilt: Dateneigenschaften und Accessor-Eigenschaften.

1. Datenattribut

1. Datenattribut: Es enthält den Speicherort eines Datenwerts, an dem der Datenwert gelesen und geschrieben werden kann.

2. Datenattribute umfassen vier Merkmale, nämlich:

konfigurierbar: Gibt an, ob das Attribut durch Löschen des Attributs neu definiert werden kann, ob die Merkmale des Attributs geändert werden können oder ob Das Attribut kann in ein Accessor-Attribut geändert werden. Der Standardwert ist true.

aufzählbar: Gibt an, ob das Attribut über eine For-In-Schleife zurückgegeben werden kann.

beschreibbar: Gibt an, ob der Wert des Attributs zurückgegeben werden kann geändert werden

Wert: Enthält den Datenwert für diese Eigenschaft. Der Standardwert ist undefiniert

Wie im folgenden Beispiel: Erstellen Sie ein Objekt „Person“ und drucken Sie den Standardwert des Attributs „Name“ aus

3 Ändern Sie das Standardattribut des Datenattributs
let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
Nach dem Login kopieren
Nach dem Login kopieren

Um die Standardeigenschaften eines Attributs zu ändern, müssen Sie eine Methode verwenden: die Methode Object.defineProperty(). Diese Methode verfügt über drei Parameter: das Objekt, in dem sich das Attribut befindet, den Attributnamen und einen Deskriptorobjekt.

Mit dieser Methode können wir diese vier Merkmale eines Attributs ändern.

Zum Beispiel, wenn wir die Eigenschaften des Namensattributs im Penson-Objekt direkt oben ändern:

2 Accessor-Attribut: this Die Eigenschaft enthält keine Datenwerte, sondern ein Paar get- und set-Methoden. Beim Lesen und Schreiben von Accessor-Eigenschaften werden diese beiden Methoden zum Ausführen von Vorgängen verwendet.
    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
Nach dem Login kopieren
Nach dem Login kopieren

2. Accessor-Attribute umfassen vier Merkmale:

konfigurierbar: Gibt an, ob das Attribut durch Löschen des Attributs neu definiert werden kann, ob die Merkmale des Attributs geändert werden können oder ob das Attribut geändert werden kann kann geändert werden. Es handelt sich um ein Accessor-Attribut, der Standardwert ist false

aufzählbar: Gibt an, ob das Attribut über eine For-In-Schleife zurückgegeben werden kann, der Standardwert ist false

Get: Die Funktion Wird beim Lesen des Attributs aufgerufen, der Standardwert ist undefiniert

Set: Die beim Schreiben von Eigenschaften aufgerufene Funktion, der Standardwert ist undefiniert

Bitte beachten Sie hier, dass die Accessor-Eigenschaft nicht direkt definiert werden kann muss über die Methodendefinition Object.defineProperty() erfolgen.

Das Folgende ist ein Beispiel für die Erstellung eines Accessor-Objektbuchs, das anschließende Ausdrucken der charakteristischen Beschreibung seines Jahres-Accessor-Attributs und das Testen seiner Methode:

Ausführungsergebnis:


Tiefes Verständnis von js-ObjektenDie anderen beiden Funktionen sind konfigurierbar und aufzählbar. Die Testmethoden können sich auf die Datenattribute beziehen. In dieser speziellen Erklärung bezüglich der konfigurierbaren Funktion gilt jedoch, dass der Standardwert der Funktion

im Zugriffsattribut falsch ist. Wenn das Programm das Attribut später löschen muss, wird es beim Definieren des Zugriffsattributs festgelegt Setzen Sie diese Funktion auf „true“, andernfalls führt dies später zu einigen Fehlerproblemen. Tiefes Verständnis von js-Objekten
Drei Attribute des Objekts

1. Prototype-Attribut

Object.getPrototypeOf() kann den Prototyp des Objekts anzeigen (nicht empfohlen)

i'sPrototyOf() (empfohlen). )

2. Klassenattribute

Anpassen von classof(), um die Klassenattribute von Objekten zu bestimmen
3. Erweiterbarkeit
Object.esExtensible()

Serialisierte Objekte

 

Objekterstellung
let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
Nach dem Login kopieren
Nach dem Login kopieren

Abfrage und Einstellung von Objektattributen

直接量:let obj={x:1};//具有prototype属性new方式:let obj=new Array();//具有protope属性Object方法:Object.create(原型);//
Nach dem Login kopieren
ps: Bei der Abfrage nicht vorhandener Attribute eines Objekts wird kein Fehler gemeldet Fehler: Wenn das Zielattribut nicht in den eigenen Attributen oder geerbten Attributen gefunden wird, gibt der Attributzugriffsausdruck undefiniert zurück. Wenn jedoch ein nicht vorhandenes Objekt abgefragt wird, wird ein Fehler gemeldet Attribute

let obj={x:1,y:2};
obj.x//1obj["y"]//2
Nach dem Login kopieren
löschen: Es trennt lediglich das Attribut vom Objekt und kann nur seine eigenen Attribute auf dem Prototypobjekt löschen.

Objektattribute erkennen

let book={name:"黑洞",author:"nd"};delete book.name;//对象不存在name属性delete book[author];//对象不存在author属性
Nach dem Login kopieren
Objektattribute auflisten

Dateneigenschaften und Accessor-Eigenschaften in Js

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")
Nach dem Login kopieren
Nach dem Login kopieren
In JavaScript werden die Eigenschaften eines Objekts in zwei Typen unterteilt: Dateneigenschaften und Accessor-Eigenschaften.

1. Datenattribut
let obj=Object.create({x:1});//for/in//(所有可枚举的自有属性与继承属性)for(item in obj){    //属性名赋值给循环变量}//Object.keys()//(对象的可枚举自有属性)Object.keys(obj)//返回一个数组,数组是由对象的属性组成的//Object.getOwnPropertyName()//(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
Nach dem Login kopieren

1. Datenattribut: Es enthält den Speicherort eines Datenwerts, an dem der Datenwert gelesen und geschrieben werden kann.

2. Datenattribute umfassen vier Merkmale, nämlich:

konfigurierbar: Gibt an, ob das Attribut durch Löschen des Attributs neu definiert werden kann, ob die Merkmale des Attributs geändert werden können oder ob Das Attribut kann in ein Accessor-Attribut geändert werden. Der Standardwert ist true.

aufzählbar: Gibt an, ob das Attribut über eine For-In-Schleife zurückgegeben werden kann.

beschreibbar: Gibt an, ob der Wert des Attributs zurückgegeben werden kann geändert werden

Wert: Enthält den Datenwert für diese Eigenschaft. Der Standardwert ist undefiniert

如下面这个例子:创建一个对象person,打印出name属性的特性的默认值

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
Nach dem Login kopieren
Nach dem Login kopieren

3.修改数据属性的默认特性

修改属性属性的默认特性要用到一个方法:Object.defineProperty()方法,这个方法有三个参数:属性所在的对象,属性名,一个描述符对象。

通过这个方法,我们可以来修改一个属性的这4个特性。

如我们对刚刚上面的penson对象里面的name属性的特性进行修改:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
Nach dem Login kopieren
Nach dem Login kopieren

2.访问器属性

1.访问器属性:这个属性不包含数据值,包含的是一对get和set方法,在读写访问器属性时,就是通过这两个方法来进行操作处理的。

2.访问器属性包含的四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

enumerable:表示能否通过for-in循环返回属性,默认为false

Get:在读取属性时调用的函数,默认值为undefined

Set:在写入属性时调用的函数,默认值为undefined

这里要注意下,访问器属性不能直接定义,要通过Object.defineProperty()这个方法来定义。

下面来个例子,创建一个访问器对象book,接着打印出其year访问器属性的特性描述并对其方法进行测试打印:
Tiefes Verständnis von js-Objekten
执行结果:
Tiefes Verständnis von js-Objekten
其他两个特性configurable,enumerable的测试方式可以参照数据属性的。不过在这特别说明下,关于configurable这个特性,因为访问器属性里面这个

特性默认值为false,如果程序后面需要对该属性进行delete操作等,那就在定义访问器属性时,将这个特性设置为true,不然这个会导致后面一些报错的问题。

对象的三个属性

1.原型属性
Object.getPrototypeOf()可以查看对象的原型 (不推荐使用)
i’sPrototyOf()(推荐使用)
2.类属性
适应classof()来判断对象的类属性
3.可拓展性
Object.esExtensible()

序列化对象

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
Nach dem Login kopieren
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTiefes Verständnis von js-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage