JavaScript-objektorientierte detaillierte Analyse von Eigenschaftsdeskriptoren

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich verwandte Themen zur Objektorientierung vor, einschließlich Attributdeskriptoren, Datendeskriptoren, Zugriffsdeskriptoren usw. Ich hoffe, es hilft allen.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

JavaScript objektorientiert – Eigenschaftsdeskriptor

JavaScript unterstützt tatsächlich eine Vielzahl von Programmierparadigmen, einschließlich funktionaler Programmierung und objektorientierter Programmierung :

• Objekte in JavaScript sind als Satz von ungeordneten Attributsammlungen konzipiert, wie eine Hip-Hop-Tabelle, bestehend aus Schlüssel und Wert;
• Schlüssel ist ein Bezeichnername, und der Wert kann von jedem beliebigen Typ sein Objekt- oder Funktionstyp;
• Wenn der Wert eine Funktion ist, können wir ihn Methode des Objekts nennen;

1 Wie erstelle ich ein Objekt?

• Die häufigste Methode zum Erstellen von Objekten besteht in der Anfangszeit darin, die Object-Klasse zu verwenden und das Schlüsselwort new zum Erstellen eines Objekts zu verwenden und dann die Eigenschaften oder Methoden im Objekt zu speichern:

var obj = new Object()
obj.name = 'why'
console.log(obj.name, obj) // why { name: 'why' }

• Später z Der Einfachheit halber erstellen viele Entwickler Objekte direkt in Form von Literalen:

// 字面量方式
var obj2 = { name: 'jam', age: '8' }
console.log(obj) // { name: 'jam', age: '8' }

2. Betreiben Sie die Eigenschaften des Objekts – Eigenschaftsdeskriptor

Vorher wurden unsere Eigenschaften direkt innerhalb des Objekts definiert oder dem direkt hinzugefügt innerhalb des Objekts;
Auf diese Weise können wir diesem Attribut jedoch keine Einschränkungen auferlegen: Kann dieses Attribut beispielsweise durch delect gelöscht werden und kann es während for-in durchlaufen werden? Durchquerung? delect删除，是否可以在 for-in遍历的时候被遍历出来呢？
如果我们想要对一个属性进行比较精准的操作控制，那么我就可以使用 属性描述符。通过属性描述符可以精准的添加或修改对象的属性；
属性描述符需要使用 Object.defineProperty来对属性进行添加或修改。

属性描述符分为两种：数据描述符和存取描述符

2.1数据描述符

数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。数据描述符具有以下可选键值：

• value：该属性对应的值。可以是任何有效的JavaScript值（数值，对象，函数等）。默认为undefined。
• writable：当且仅当该属性的writable为true时，value才能被复制运算符改变。默认为false。
• configurable：当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。
• enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。

2.2.1、获取属性描述符 Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。

Object.getOwnPropertyDescriptor(obj，prop)

• obj：需要查找的目标对象
• prop：目标对象内属性名称（String类型）。
• 返回值：如果指定的属性存在在于对象上，则返回其属性描述符对象，否则返回undefined。

注意：如果该方法的第一个参数不是对象，会报错（TypeError）。

2.1.2、设置属性描述符 Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty（obj，prop，descriptor）

• obj：要在其上定义属性的对象。
• prop：要定义或修改的属性的名称。
• descriptor：将被定义或修改的属性描述符
• 返回值：被传递给函数的对象

如下示例代码展示了属性描述符的设置和获取
var obj = {
    name: 'jam',
    age: 8
}
Object.defineProperty(obj, 'job', {
    value: '律师'
})
console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { value: 8, writable: true, enumerable: true, configurable: true }

console.log(obj.job) // 律师
// 通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的
console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {value: '律师',writable: false,enumerable: false,configurable: false}

注意：通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的 Wenn wir eine genauere operative Kontrolle über ein Attribut haben möchten, kann ich den

Attributdeskriptor

verwenden. Die Eigenschaften eines Objekts können durch Eigenschaftsdeskriptoren genau hinzugefügt oder geändert werden.

Eigenschaftsdeskriptoren müssen Object.defineProperty verwenden, um Eigenschaften hinzuzufügen oder zu ändern.

Attributdeskriptoren werden in zwei Typen unterteilt: Datendeskriptoren und Zugriffsdeskriptoren

2.1 Datendeskriptor

Ein Datendeskriptor ist ein Attribut mit einem Wert. Der Wert kann sein beschreibbar oder unbeschreiblich. Der Datendeskriptor verfügt über die folgenden optionalen Schlüsselwerte:

Wert: Der Wert, der diesem Attribut entspricht. Kann jeder gültige JavaScript-Wert sein (numerischer Wert, Objekt, Funktion usw.). Der Standardwert ist undefiniert.

schreibbar: Nur wenn die Schreibbarkeit dieses Attributs wahr ist, kann der Wert durch den Kopieroperator geändert werden. Der Standardwert ist falsch.

konfigurierbar: Nur wenn das Konfigurierbare des Attributs wahr ist, kann der Attributdeskriptor geändert werden und das Attribut kann auch aus dem entsprechenden Objekt gelöscht werden. Der Standardwert ist falsch.

aufzählbar: Nur wenn die Aufzählung des Attributs wahr ist, kann das Attribut im Aufzählungsattribut des Objekts erscheinen. Der Standardwert ist falsch.

2.2.1. Holen Sie sich den Eigenschaftsdeskriptor Object.getOwnPropertyDescriptor()

Die Methode Object.getOwnPropertyDescriptor() gibt den Eigenschaftsdeskriptor zurück, der der eigenen Eigenschaft für das angegebene Objekt entspricht.

var obj = {
    name: 'jam',
    age: 8
}
Object.defineProperty(obj, 'address', {
    value: '河北',
    // configurable 该属性不可删除，更不可再次使用defineProperty修改属性描述符
    configurable: false,

})
delete obj.address // 想使用delete删除该属性
obj.address = '广州' // 想修改obj中的属性address值为广州
console.log(obj.address)  // 输出结果：河北

obj: Das zu findende Zielobjekt 🎜🎜prop: Der Name des Attributs im Zielobjekt (String-Typ). 🎜🎜Rückgabewert: Wenn die angegebene Eigenschaft für das Objekt vorhanden ist, wird ihr Eigenschaftsdeskriptorobjekt zurückgegeben, andernfalls wird undefiniert zurückgegeben. 🎜🎜🎜🎜Hinweis: Wenn der erste Parameter dieser Methode kein Objekt ist, wird ein Fehler (TypeError) gemeldet. 🎜🎜

🎜2.1.2. Legen Sie den Eigenschaftsdeskriptor Object.defineProperty fest🎜

🎜Die Methode Object.defineProperty() definiert direkt eine neue Eigenschaft für ein Objekt oder ändert eine vorhandene Eigenschaft eines Objekts und Dieses Objekt zurückgeben. 🎜

var obj = {
    name: 'jam',
    age: 8}Object.defineProperty(obj, 'sex ', {
    value: '男',
    // enumerable 配置该属性是否可以枚举
    enumerable: true})for (i in obj) {
    console.log(i)}

🎜🎜obj: Das Objekt, für das die Eigenschaften definiert werden sollen. 🎜🎜prop: Der Name der Eigenschaft, die definiert oder geändert werden soll. 🎜🎜descriptor: Der zu definierende oder zu ändernde Eigenschaftsdeskriptor 🎜🎜Rückgabewert: Das an die Funktion übergebene Objekt 🎜🎜

var obj = {
    name: 'jam',
    age: 8}Object.defineProperty(obj, 'score', {
    value: 80,
    // writable: true 
    writable: false})obj.score = 100 console.log(obj.score) // 80

🎜🎜Hinweis: Die über defineProperty hinzugefügte neue Eigenschaft kann nicht geändert oder gelöscht werden und ist nicht aufzählbar🎜🎜🎜🎜(1) Ob konfigurierbar auf dem Objekt gelöscht werden kann🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Object.defineProperties（obj，props）</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜Da der konfigurierbare Wert des Attributdeskriptors falsch ist und nicht gelöscht oder geändert werden kann, werden Löschung und Änderung nicht wirksam🎜🎜 🎜🎜( 2) Ob enumerable aufgezählt und durchlaufen werden kann🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var obj = {     name: 'jam',}Object.defineProperties(obj, {     'age': {         value: 28,         writable: true,         configurable: false,         enumerable: true     },     'job': {         value: '律师',         writable: true,         configurable: false,         enumerable: true     },     'sex': {         value: '男',         writable: false,         configurable: false,         enumerable: true     },     'height': {         value: '1.8 m',         writable: false,         configurable: false,         enumerable: true     }})console.log(obj) //  name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜Wenn enumerable: false, ist das Ausgabeergebnis Name Alter🎜 Wenn enumerable: true, ist das Ausgabeergebnis Name Alter Geschlecht🎜🎜🎜🎜 (3) beschreibbar Diese Funktion steuert, ob Diesem Attribut kann ein Wert zugewiesen werden (einen Wert schreiben)

2.1.3、同时设置多个属性描述符 Object.defineProperties

是不是感觉每次只能设置一个属性的属性描述符很繁琐，Object.defineProperties可以帮你解决问题。
Object.defineProperties（）方法为对象定义一个或多个新属性或修改现有属性，并返回该对象。

Object.defineProperties（obj，props）

• obj：要在其上定义属性的对象。
• props：要定义其可枚举属性或修改的属性描述符的对象。
• 返回值：被传递给函数的对象。

示例代码如下：

var obj = {
    name: 'jam',}Object.defineProperties(obj, {
    'age': {
        value: 28,
        writable: true,
        configurable: false,
        enumerable: true
    },
    'job': {
        value: '律师',
        writable: true,
        configurable: false,
        enumerable: true
    },
    'sex': {
        value: '男',
        writable: false,
        configurable: false,
        enumerable: true
    },
    'height': {
        value: '1.8 m',
        writable: false,
        configurable: false,
        enumerable: true
    }})console.log(obj) //  name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }

2.2存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:

• get：给属性提供getter的方法，如果没有getter则为undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象。
• set：给属性提供setter的方法，如果没有setter则为undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
• configurable：当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。
• enurnerable：当且仅当该属性的enurnerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。

configurable 和 enurnerable 的使用与数据描述符中的一致，这里就不过多讲解了。
主要讲一下get 和 set 方法的使用

2.2.1 get()与set()的使用

var obj = {
    name: 'jam',
    age: 8,
    _address: '河北'
}

// 存取描述符的使用场景
// 1.隐藏某一个私有属性被希望直接被外界使用和赋值
// 2.如果我们希望解惑某一个属性它访问和设置值的过程时，也会使用存储属性描述符
Object.defineProperty(obj, 'address', {
    enumerable: true,
    configurable: true,
    get: function () {
        foo()
        return this._address
    },
    set: function (value) {
        bar()
        this._address = value
    }
})
function foo () {
    console.log("截获了一次address的值")
}

function bar () {
    console.log("设置了一次address的值")
}

上述示例代码控制台打印结果如下：

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonJavaScript-objektorientierte detaillierte Analyse von Eigenschaftsdeskriptoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!