Maison > interface Web > js tutoriel > Une brève introduction aux types orientés objet et objets en js (avec code)

Une brève introduction aux types orientés objet et objets en js (avec code)

不言
Libérer: 2018-08-15 13:42:48
original
1491 Les gens l'ont consulté

Le contenu de cet article est une brève introduction aux types orientés objet et objet en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Orienté objet

Le nom complet de la programmation orientée objet est Programmation Orientée Objet, ou POO en abrégé. La programmation orientée objet est une méthode de programmation qui utilise des méthodes abstraites pour créer des modèles basés sur le monde réel.
La programmation orientée objet peut être considérée comme une conception de logiciel qui utilise une série d'objets pour coopérer les uns avec les autres. Les trois principales caractéristiques de la programmation orientée objet sont : l'encapsulation, l'héritage et le polymorphisme.

Encapsulation

La soi-disant encapsulation consiste à l'utiliser selon les exigences et à obtenir les résultats correspondants sans connaître le véritable principe d'exécution.
L'encapsulation est principalement utilisée pour décrire le contenu (encapsulé) contenu dans l'objet. Elle se compose généralement de deux parties :

  • Données associées (utilisées pour stocker les attributs)

  • Que peut-on faire sur la base de ces données

Héritage L'héritage fait généralement référence à la relation entre les classes. Si deux classes ont les mêmes propriétés ou méthodes, alors une classe peut hériter de l’autre classe sans avoir à définir à nouveau les mêmes propriétés ou méthodes.
La création de versions spécialisées d'une ou plusieurs classes est appelée héritage (JavaScript ne prend en charge que l'héritage unique). La version spécialisée d'une classe créée est généralement appelée sous-classe et la classe supplémentaire est généralement appelée classe parent.

Polymorphisme

Différents objets peuvent définir des méthodes portant le même nom, et les méthodes agissent sur l'objet où elles se trouvent. La capacité de différents objets à implémenter leurs propres comportements via le même appel de méthode est appelée polymorphisme.

Constructeur

Le constructeur, également appelé constructeur ou modèle d'objet, est une méthode de l'objet. Le constructeur est appelé lors de l'instanciation. Les fonctions peuvent être utilisées comme constructeurs en JavaScript.

/*  创建构造函数->用于创建对象
*    function 构造函数名称(){
*       this.属性名 = 属性值
*       this.方法名 = function(){
*           方法体
*           }
*     }
      this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数,构造函数的属性和方法使用this关键字
    this.name=function () {
        console.log('哈士奇')
    }
}

/*   利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);
Copier après la connexion

Type d'objet

Descripteur de propriété

JavaScript fournit une structure de données interne pour décrire la valeur d'un objet et contrôler son comportement, tel comme si la propriété est accessible en écriture, configurable, supprimable, énumérable, etc. Cette structure de données interne est appelée un descripteur de propriété.
Il existe actuellement deux formes principales de descripteurs d'attributs dans les objets : les descripteurs de données et les descripteurs d'accès.

Descripteur de données

Un descripteur de données est une propriété avec une valeur qui peut ou non être inscriptible. Le descripteur de données a les valeurs clés facultatives suivantes :

  • value : La valeur correspondant à cet attribut. Il peut s'agir de n'importe quelle valeur JavaScript valide. La valeur par défaut est indéfinie,

  • inscriptible : Si et seulement si l'écriture de l'attribut est vraie, la valeur peut être modifiée par l'opérateur d'affectation. La valeur par défaut est fausse.

  • configurable : Si et seulement si le configurable de l'attribut est vrai, le descripteur de l'attribut peut être modifié, et l'attribut peut également être supprimé de l'objet correspondant. La valeur par défaut est fausse.

  • enumerable : Si et seulement si l'énumérable de l'attribut est vrai, l'attribut peut apparaître dans l'attribut d'énumération de l'objet. La valeur par défaut est fausse.

Descripteur d'accès

Le descripteur d'accès est une propriété décrite par une paire de fonctions getter-setter. Il existe les valeurs clés facultatives suivantes

  • get : Fournissez une méthode getter pour l'attribut, s'il n'y a pas de getter, il ne sera pas défini. Lors de l'accès à cette propriété, la méthode sera exécutée. Aucun paramètre n'est transmis lors de l'exécution de la méthode, mais l'objet this sera transmis.

  • set : Fournit une méthode setter pour la propriété. S'il n'y a pas de setter, elle ne sera pas définie. Cette méthode est déclenchée lorsque la propriété est modifiée. Cette méthode accepte le seul paramètre, qui est la nouvelle valeur de paramètre de l'attribut modifié.

  • configurable : Si et seulement si le configurable de l'attribut est vrai, le descripteur de l'attribut peut être modifié, et l'attribut peut également être supprimé de l'objet correspondant. La valeur par défaut est faux.

  • enumerable : Si et seulement si l'énumérable de l'attribut est vrai, l'attribut peut apparaître dans l'attribut d'énumération de l'objet. La valeur par défaut est fausse.

Récupérer le descripteur de propriété

La méthode Object.getOwnPropentyDescriptor() renvoie le descripteur de propriété correspondant à une propre propriété sur l'objet spécifié

var obj = {
    name : '哈士奇'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
    * 如果
  */
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)
Copier après la connexion

Définissez la valeur clé facultative de la valeur du descripteur de propriété

  • La méthode Object.deginepropety() définit de nouvelles propriétés pour l'objet ou modifie les propriétés existantes et renvoie l'objet.

var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
    name : '阿拉斯加'
}
/*
    Object.defineProperty(obj, prop, descriptor)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * descriptor - 表示属性描述符,必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
//修改name属性
Object.defineProperty(obj, 'name',{
    value:'哈士奇'
} );
console.log(obj.name);//哈士奇

/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
    value : 2
});
Copier après la connexion
  • La méthode Object.degineproperties() définit une ou plusieurs nouvelles propriétés pour l'objet ou modifie les propriétés existantes et renvoie la valeur.

Définir la valeur de clé facultative du descripteur d'attribut weitable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若

Object.defineProperty(obj, 'age', {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80
Copier après la connexion

Définir la valeur de clé facultative du descripteur d'attribut configurable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : true, // 控制当前属性是否可被修改
    configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefined
Copier après la connexion

Définir le descripteur d'attribut énumérable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    * 仅能循环遍历对象中可被枚举的属性
      * for...in语句
      * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);
Copier après la connexion

Définir l'accesseur de descripteur d'attribut

En plus d'être directement définis, les attributs de l'objet peuvent également être définis à l'aide d'accesseurs. Le setter est une fonction de valeur, utilisant le set dans le descripteur d'attribut ; le getter est une fonction de valeur, utilisant le get dans le descripteur d'attribut.

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示当前目标属性名称
        console.log('setter: ' + newValue);
        value = newValue;
    }
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"
Copier après la connexion

Objets inviolables

Les objets définis par défaut peuvent être modifiés à tout moment et en tout lieu, c'est pourquoi un mécanisme pour empêcher la falsification est ajouté et divisé en trois niveaux

  • Interdire l'extension : Interdire l'extension de nouvelles propriétés et méthodes pour les objets

  • Objet scellé : autoriser uniquement la lecture et l'écriture de la valeur de l'attribut

  • Objet gelé : interdire toute opération

Extensions interdites

  • Object.preventExtensions() définit l'objet spécifié comme étant non extensible

  • Object.isExtensible() détermine si un l'objet peut être étendu

Seal Object

  • La méthode Objet.seal() est utilisée pour sceller un objet, empêchant l'ajout de nouvelles propriétés et marquer les propriétés existantes comme propriétés actuelles non configurables. La valeur peut être écrite.

  • Object.Sealead() détermine si l'objet est scellé

Geler l'objet

  • Object . freeze() est utilisé pour geler un objet. Aucune opération ne peut être effectuée sur cet objet. Il est uniquement lisible

  • Object.isFrozen() détermine si l'objet est gelé

    .

Recommandations associées :

Javascript Objet orienté objet (Object)_js Orienté objet

Comment utiliser le prototype de l'objet Object en JS

JavaScript orienté objet - création d'objets simples et d'objets JSON

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