Heim  >  Artikel  >  Web-Frontend  >  Clevere Nutzung von Javascript und erweiterte Nutzung von Object.defineProperty

Clevere Nutzung von Javascript und erweiterte Nutzung von Object.defineProperty

巴扎黑
巴扎黑Original
2017-07-20 13:31:041701Durchsuche

Math.max implementiert das Abrufen des größten Elements im Array

var array = [1,2,3,4,5];var max = Math.max.apply(null, array);
console.log(max); // 5

Beim Aufruf wird dem ersten Parameter eine Null zugewiesen. Dies liegt daran, dass es kein Objekt zum Aufrufen gibt -Methode verwenden, müssen Sie diese Methode nur verwenden, um den Vorgang zu unterstützen und das zurückgegebene Ergebnis zu erhalten. Sie übergeben also direkt eine Null.

Math.min implementiert das Abrufen des kleinsten Elements im Array

var array = [1,2,3,4,5];var min= Math.min.apply(null, array);console.log(min); // 1

Max- und Min-Methoden für das native Objekt hinzufügen

Das werden Sie Sie müssen die native Objektmethode Object.defineProperty() verwenden, die direkt ein neues Attribut für ein Objekt definiert oder ein vorhandenes Attribut eines Objekts ändert und das Objekt

    Object.defineProperty(Array.prototype, 'max', {  
        writable: false,  
        enumerable: false,  
        configurable: true,  
        value: function () {  return Math.max.apply(null, this);  
        }  
    });  
      
    Object.defineProperty(Array.prototype, 'min', {  
        writable: false,  
        enumerable: false,  
        configurable: true,  
        value: function () {  return Math.min.apply(null, this);  
        }  
    });
zurückgibt

Rufen Sie es einfach direkt im Array auf:

var arr = [54,545,2165,545,56];  
console.log(arr.max());  
console.log(arr.min());

Die oben erwähnte Methode von Object.defineProperty, lassen Sie uns sie unten verstehen.

Verwendung von Object.defineProperty

Ein Objekt ist eine ungeordnete Sammlung, die aus mehreren Name/Wert-Paaren besteht. Jede Eigenschaft in einem Objekt entspricht einem Wert beliebigen Typs. Objekte können mithilfe von Konstruktoren oder Literalen definiert werden:

var obj = new Object;  //obj = {}obj.name = "张三";  //添加描述obj.say = function(){};  //添加行为

Zusätzlich zu den oben genannten Methoden zum Hinzufügen von Attributen können Sie auch Object.defineProperty verwenden, um neue zu definieren Attribute oder Ändern der ursprünglichen Eigenschaften.

Object.defineProperty() Beschreibung

Syntax: Object.defineProperty(obj, prop, descriptor)

Parameterbeschreibung:

  • Objekt: erforderlich. Zielobjekt

  • prop: Erforderlich. Der Name des zu definierenden oder zu ändernden Attributs

  • Deskriptor: erforderlich. Eigenschaften, die das Zielattribut besitzt

Rückgabewert:

  • Das an die Funktion übergebene Objekt. Das heißt, der erste Parameter obj

ist für Attribute. Wir können einige Eigenschaften für dieses Attribut festlegen, z. B. ob es schreibgeschützt und nicht beschreibbar ist for..in oder Object.keys().

Merkmale Beschreibung zu den Eigenschaften des Objekts hinzufügen Derzeit werden zwei Formen bereitgestellt: Datenbeschreibung und Zugriffsbeschreibung.

Datenbeschreibung

Wenn Sie ein Attribut eines Objekts ändern oder definieren, fügen Sie diesem Attribut einige Merkmale hinzu:

var obj = {
    test:"hello"}//对象已有的属性添加特性描述Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false});//对象新添加的属性的特性描述Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false});

Datenbeschreibung Die Eigenschaften in sind alle optional. Werfen wir einen Blick auf die Rolle der einzelnen Eigenschaften. Der dem Attribut

Wert

entsprechende Wert kann ein beliebiger Werttyp sein. Der Standardwert ist undefiniert

var obj = {}//第一种情况:不设置value属性Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined------------------------------//第二种情况:设置value属性Object.defineProperty(obj,"newKey",{
    value:"hello"});
console.log( obj.newKey );  //hello

beschreibbar

Ob der Wert der Immobilie außer Kraft gesetzt werden kann. Auf „true“ gesetzt und kann überschrieben werden; auf „false“ gesetzt und nicht überschrieben werden können. Der Standardwert ist falsch.

var obj = {}//第一种情况:writable设置为false,不能重写。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false});//更改newKey的值obj.newKey = "change value";
console.log( obj.newKey );  //hello//第二种情况:writable设置为true,可以重写Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true});//更改newKey的值obj.newKey = "change value";
console.log( obj.newKey );  //change value

aufzählbar

Ob diese Eigenschaft aufzählbar sein kann (mithilfe von for...in oder Object.keys()). Wenn es auf „true“ gesetzt ist, kann es aufgezählt werden; wenn es auf „false“ gesetzt ist, kann es nicht aufgezählt werden. Der Standardwert ist falsch.

var obj = {}//第一种情况:enumerable设置为false,不能被枚举。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false});//枚举对象的属性for( var attr in obj ){
    console.log( attr );  
}//第二种情况:enumerable设置为true,可以被枚举。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true});//枚举对象的属性for( var attr in obj ){
    console.log( attr );  //newKey}

konfigurierbar

Ob das Zielattribut gelöscht werden kann oder ob das Attribut erneut geändert werden kann (beschreibbar, konfigurierbar, aufzählbar). Wenn es auf „true“ gesetzt ist, kann das Attribut gelöscht oder zurückgesetzt werden; wenn es auf „false“ gesetzt ist, kann das Attribut nicht gelöscht oder zurückgesetzt werden. Der Standardwert ist falsch.

Dieses Attribut spielt zwei Rollen:

  • Ob das Zielattribut mit „Löschen“ gelöscht werden kann

  • Ob das Zielattribut gelöscht werden kann wieder gelöscht werden Eigenschaften festlegen

//-----------------测试目标属性是否能被删除------------------------var obj = {}//第一种情况:configurable设置为false,不能被删除。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false});//删除属性delete obj.newKey;
console.log( obj.newKey ); //hello//第二种情况:configurable设置为true,可以被删除。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true});//删除属性delete obj.newKey;
console.log( obj.newKey ); //undefined//-----------------测试是否可以再次修改特性------------------------var obj = {}//第一种情况:configurable设置为false,不能再次修改特性。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false});//重新修改特性Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey//第二种情况:configurable设置为true,可以再次修改特性。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true});//重新修改特性Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true});
console.log( obj.newKey ); //hello

Neben dem Festlegen von Eigenschaften für neu definierte Eigenschaften können Sie auch Eigenschaften für bestehende Eigenschaften festlegen

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。var obj = {
    test:"hello"}//改写值obj.test = 'change value';

console.log( obj.test ); //'change value'Object.defineProperty(obj,"test",{
    writable:false})//再次改写值obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

Tipp: Sobald Sie Object.defineProperty zum Hinzufügen von Attributen zu einem Objekt verwenden und die Eigenschaften des Attributs nicht festlegen, werden die Werte von configurable, enumerable und writable sind alle Standardwerte false

var obj = {};//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false//这就导致了newkey这个是不能重写、不能枚举、不能再次设置特性//Object.defineProperty(obj,'newKey',{

});//设置值obj.newKey = 'hello';
console.log(obj.newKey);  //undefined//枚举for( var attr in obj ){
    console.log(attr);
}

Zusammenfassung der Einstellungsfunktion:

  • Wert: Legen Sie den Wert des Attributs fest

  • beschreibbar: Ob der Wert umgeschrieben werden kann. true |. false

  • enumerable: Ob das Zielattribut aufgezählt werden kann. true |. false

  • konfigurierbar: Ob die Zieleigenschaft gelöscht werden kann oder ob die Eigenschaft erneut geändert werden kann true | 🎜 >

    Bei Verwendung eines Accessors zur Beschreibung der Eigenschaften eines Attributs dürfen die folgenden Attributattribute festgelegt werden:

Hinweis: Bei Verwendung des Getter- oder Setter-Methode. Die beiden Attribute beschreibbar und Wert dürfen nicht verwendet werden
var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | falseenumerable: true | false});
Getter/Setter

Wenn Sie den Wert eines Attributs eines Objekts festlegen oder abrufen, können Sie dies tun Bereitstellung von Getter/Setter-Methoden.

Getter ist eine Methode zum Abrufen des Attributwerts

  • Setter ist eine Methode zum Festlegen des Attributwerts.

  • Verwenden Sie Get/Set-Attribute in Attributen, um entsprechende Methoden zu definieren.

Hinweis: get oder set müssen nicht paarweise erscheinen, schreiben Sie einfach eines davon. Wenn die Methode nicht festgelegt ist, ist der Standardwert von get und set undefiniert

Kompatibilität

kann nur für DOM-Objekte unter IE8 verwendet werden, versuchen Sie es für native Objekte Object.defineProperty() meldet einen Fehler.

Das obige ist der detaillierte Inhalt vonClevere Nutzung von Javascript und erweiterte Nutzung von Object.defineProperty. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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