Maison > interface Web > js tutoriel > Utilisation intelligente de l'application Javascript et utilisation étendue d'Object.defineProperty

Utilisation intelligente de l'application Javascript et utilisation étendue d'Object.defineProperty

巴扎黑
Libérer: 2017-07-20 13:31:04
original
1778 Les gens l'ont consulté

Math.max implémente l'obtention du plus grand élément du tableau

var array = [1,2,3,4,5];var max = Math.max.apply(null, array);
console.log(max); // 5
Copier après la connexion

Lors de l'appel, le premier paramètre reçoit une valeur nulle. C'est parce qu'il n'y a aucun objet pour appeler cela. méthode. , il vous suffit d'utiliser cette méthode pour faciliter l'opération et obtenir le résultat renvoyé, vous transmettez donc directement une valeur nulle.

Math.min implémente l'obtention du plus petit élément du tableau

var array = [1,2,3,4,5];var min= Math.min.apply(null, array);console.log(min); // 1
Copier après la connexion

Ajouter des méthodes max et min sur l'objet natif

C'est ce que vous ferez il faut utiliser la méthode objet native Object.defineProperty(), qui définira directement un nouvel attribut sur un objet, ou modifiera un attribut existant d'un objet, et renverra l'objet

    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);  
        }  
    });
Copier après la connexion

Appelez-le simplement directement sur le tableau :

var arr = [54,545,2165,545,56];  
console.log(arr.max());  
console.log(arr.min());
Copier après la connexion

La méthode Object.defineProperty mentionnée ci-dessus, comprenons-la ci-dessous.

Utilisation de Object.defineProperty

Un objet est une collection non ordonnée composée de plusieurs paires nom/valeur. Chaque propriété d'un objet correspond à une valeur de n'importe quel type. Les objets peuvent être définis à l'aide de constructeurs ou de littéraux :

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

En plus des méthodes ci-dessus pour ajouter des attributs, vous pouvez également utiliser Object.defineProperty pour définir de nouveaux attributs ou Modifier les propriétés d'origine.

Description de Object.defineProperty()

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

Description du paramètre :

  • obj : obligatoire. Objet cible

  • prop : obligatoire. Le nom de l'attribut à définir ou à modifier

  • descripteur : obligatoire. Caractéristiques possédées par l'attribut cible

Valeur de retour :

  • L'objet passé dans la fonction. Autrement dit, le premier paramètre obj

est destiné aux attributs. Nous pouvons définir certaines caractéristiques pour cet attribut, par exemple s'il est en lecture seule et non en écriture ; for..in ou Object.keys().

Ajouter une description de caractéristique aux propriétés de l'objet Actuellement, deux formulaires sont fournis : la description des données et la description de l'accesseur.

Description des données

Lors de la modification ou de la définition d'un attribut d'un objet, ajoutez quelques caractéristiques à cet attribut :

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});
Copier après la connexion

Description des données Les propriétés in sont tous facultatifs. Jetons un coup d'œil au rôle de la définition de chaque propriété. La valeur correspondant à l'attribut

value

peut être n'importe quel type de valeur. La valeur par défaut est indéfinie

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

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

inscriptible

<.> Si la valeur de la propriété peut être annulée. Défini sur true et peut être remplacé ; défini sur false et ne peut pas être remplacé. La valeur par défaut est faux.

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
Copier après la connexion
enumerable

Si cette propriété peut être énumérable (en utilisant for...in ou Object.keys()). S'il est défini sur true, il peut être énuméré ; s'il est défini sur false, il ne peut pas être énuméré. La valeur par défaut est faux.

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}
Copier après la connexion
configurable

Indique si l'attribut cible peut être supprimé ou si l'attribut peut être à nouveau modifié (inscriptible, configurable, énumérable). S'il est défini sur true, l'attribut peut être supprimé ou l'attribut peut être réinitialisé ; s'il est défini sur false, l'attribut ne peut pas être supprimé ou l'attribut ne peut pas être réinitialisé. La valeur par défaut est faux.

Cet attribut joue deux rôles :

  • Si l'attribut cible peut être supprimé à l'aide de delete

  • Si l'attribut cible peut être supprimé à nouveau Définition des propriétés

//-----------------测试目标属性是否能被删除------------------------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
Copier après la connexion
En plus de définir les propriétés des propriétés nouvellement définies, vous pouvez également définir les propriétés des propriétés existantes

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。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'
Copier après la connexion
Astuce : Une fois que vous utilisez

pour ajouter des attributs à un objet, si vous ne définissez pas les propriétés de l'attribut, alors les valeurs​​de Object.defineProperty, configurable et enumerable seront tous les valeurs par défaut writablefalse

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);
}
Copier après la connexion
Résumé des fonctionnalités de réglage :

  • value : Définir la valeur de l'attribut

  • writable : Indique si la valeur peut être réécrite. true | false

  • enumerable : indique si l'attribut cible peut être énuméré. true | false

  • configurable : indique si la propriété cible peut être supprimée ou si la propriété peut être à nouveau modifiée true | false

Description de l'accesseur

Lors de l'utilisation d'un accesseur pour décrire les caractéristiques d'un attribut, les attributs d'attribut suivants peuvent être définis :

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | falseenumerable: true | false});
Copier après la connexion
Remarque : lors de l'utilisation de Méthode getter ou setter, Les deux attributs inscriptibles et value ne peuvent pas être utilisés

getter/setter

Lors de la définition ou de l'obtention de la valeur d'un attribut d'un objet, vous pouvez fournir des méthodes getter/setter.

  • getter est une méthode pour obtenir la valeur de l'attribut

  • setter est une méthode pour définir la valeur de l'attribut.

Utilisez les attributs get/set dans les attributs pour définir les méthodes correspondantes.

var obj = {};var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){//当获取值的时候触发的函数return initValue;    
    },
    set:function (value){//当设置值的时候触发的函数,设置的新值通过参数value拿到initValue = value;
    }
});//获取值console.log( obj.newKey );  //hello//设置值obj.newKey = 'change value';

console.log( obj.newKey ); //change value
Copier après la connexion

Remarque : get ou set ne doivent pas nécessairement apparaître par paires, écrivez simplement l'un ou l'autre. Si la méthode n'est pas définie, la valeur par défaut de get et set est indéfinie

Compatibilité

ne peut être utilisée que sur les objets DOM sous ie8, essayez de l'utiliser sur des objets natifs Object.defineProperty() signalera une erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal