Une compréhension préliminaire des compétences javascript orientées objet_javascript

Avant-propos

Objets basés sur les classes : nous savons tous qu'un signe évident dans les langages orientés objet est le concept de classes. Grâce aux classes, qui sont similaires aux modèles, nous pouvons créer de nombreux objets avec les mêmes propriétés et méthodes. Cependant, il n'y a pas de concept de classes dans ECMAScript, donc naturellement il sera différent des objets dans les langages basés sur les classes.

Objets en js : une collection non ordonnée d'attributs, qui peut inclure des valeurs de base, des objets et des fonctions. Autrement dit, un objet en js est un ensemble de valeurs sans ordre spécifique. Chaque propriété ou méthode de l'objet a son propre nom et chaque nom correspond à une valeur.

Comprendre l'objet

Comment créer des objets

1 Le moyen le plus simple de créer un objet est de créer une instance d'objet, puis de lui ajouter des propriétés et des méthodes.

Par exemple

  var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 Utiliser la forme littérale d'objet

Par exemple

  var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

Type d'attribut

ECMAScript a deux types d'attributs de données : les attributs de données et les attributs d'accesseur.

Attributs des données

L'attribut data contient l'emplacement d'une valeur de données. Les valeurs peuvent être lues et écrites à cet emplacement. Quatre propriétés décrivent son comportement.

1.[[Configurable]] : Indique si l'attribut peut être redéfini en le supprimant via delete...La valeur par défaut est true

2.[[Enumerable]] : Indique si l'attribut peut être renvoyé via la boucle for in... La valeur par défaut est true

3.[[Writable]] : Indique si la valeur de l'attribut peut être modifiée... La valeur par défaut est true

4.[[Valeur]] : Indique la valeur de cet attribut. La valeur par défaut est indéfinie

Pour modifier les propriétés par défaut d'une propriété, vous devez utiliser la méthode ES5 Object.defineProperty(), qui reçoit trois paramètres : l'objet où se trouve la propriété, le nom de la propriété et un objet décrivant les propriétés de la propriété. (configurable, énumérable, inscriptible, valeur), la définition d'un ou plusieurs d'entre eux peut modifier les caractéristiques correspondantes

DÉMO

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 writable:false,//表示不允许重写
 ennumerable:false,//表示不允许通过for in遍历
 value:'谦龙'//设置该对象中属性的值
})
person.name='谦龙2';//尝试重新设置 结果不生效
delete person.name;//尝试删除 结果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//谦龙

Remarque : après avoir défini configurable sur false, il n'est plus autorisé à le modifier à nouveau en true. De plus, lors de l'appel de la méthode Object.defineProperty(), les valeurs par défaut de configurable, ennumerable et writable sont false.

Propriétés des accesseurs

Les propriétés de l'accesseur ne contiennent pas de valeurs de données. Elles contiennent une paire de fonctions getter et setter (mais ces deux fonctions ne sont pas nécessaires). Lors de la lecture des propriétés de l'accesseur, la fonction getter sera appelée. valid Lors de l'écriture de la propriété d'accesseur, la fonction setter est appelée et la nouvelle valeur est transmise. Cette fonction est responsable de la façon de traiter les données.

Les propriétés des accesseurs ont les caractéristiques suivantes

[[configurable]] indique si les attributs peuvent être supprimés via delete pour définir de nouveaux attributs

[[enumerable]] indique si les attributs renvoyés peuvent être parcourus via une boucle for in

[[get]] Fonction appelée lors de la lecture des propriétés, la valeur par défaut est indéfinie

[[set]] La fonction appelée lors de l'écriture de la fonction La valeur par défaut est indéfinie

Remarque : les propriétés de l'accesseur ne peuvent pas être définies directement et doivent être définies via Object.defineProterty()

DÉMO

 var book={
 _year:2015, //这里的下划线是常见的记号，表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

Définir plusieurs attributs

Nous pouvons ajouter plusieurs propriétés à un objet via la méthode Object.defineProperties() dans ES5. Cette méthode accepte deux paramètres d'objet. Le premier paramètre est l'objet dont les propriétés doivent être ajoutées et modifiées, et le deuxième paramètre est The. les attributs correspondent aux attributs à ajouter et à modifier dans le premier objet.

DÉMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
book.year=2016;
console.log(book.year,book.edition); // 2016 2

Lire les propriétés des propriétés de l'objet

En utilisant la méthode Object.getOwnPropertyDescriptor() dans ES5, vous pouvez obtenir le descripteur d'une propriété donnée.

Cette méthode reçoit deux paramètres : l'objet où se trouve l'attribut et le nom de l'attribut du descripteur à lire. Ce qui est renvoyé est un objet. S'il s'agit d'un attribut de données, les attributs renvoyés sont configurables, énumérables, inscriptibles, valeur. S'il s'agit d'un attribut accesseur, les attributs renvoyés sont configurables, énumérables, get, set

.

DÉMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
//对象遍历函数
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

C'est toute l'introduction ci-dessus à la compréhension préliminaire du JavaScript orienté objet. Faites attention.