Apprenez le javascript orienté objet et comprenez les compétences javascript object_javascript

1. Réflexions sur la programmation
Orienté processus : Centré sur le processus, affiné progressivement de haut en bas, le programme est considéré comme un ensemble d'appels de fonctions
Orienté objet : les objets servent d'unité de base du programme, et le programme est décomposé en données et opérations associées
2. Classes et objets
Classe : une description abstraite de choses ayant les mêmes caractéristiques et caractéristiques
Objet : une chose spécifique correspondant à un certain type
3. Trois caractéristiques majeures de l'orientation objet
Encapsulation : masquez les détails d'implémentation et réalisez la modularisation du code
Héritage : étendre les modules de code existants pour réaliser la réutilisation du code
Polymorphisme : différentes méthodes d'implémentation d'interfaces pour réaliser la réutilisation des interfaces
4. Définition d'objet : Une collection d'attributs non ordonnés, dont les attributs peuvent inclure des valeurs de base, des objets ou des fonctions

//简单的对象实例
var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
    alert(this.name);
  }

5. Types d'attributs internes : Les attributs internes ne sont pas accessibles directement. ECMAScript5 les met entre crochets et les divise en attributs de données et attributs d'accesseur
. [1] L'attribut data contient un emplacement de valeur de données où la valeur peut être lue et écrite. Les attributs de données ont 4 caractéristiques :
a. [[Configurable]] : indique si l'attribut peut être redéfini en supprimant l'attribut via la suppression, si les caractéristiques de l'attribut peuvent être modifiées ou si l'attribut peut être modifié en tant qu'attribut accesseur pour les attributs définis directement sur le. objet, la valeur par défaut est true
. b. [[Enumerable]] : Indique si les attributs peuvent être renvoyés via une boucle for-in. Pour les attributs définis directement sur l'objet, la valeur par défaut est true
. c, [[Writable]] : Indique si la valeur de l'attribut peut être modifiée. Pour les attributs définis directement sur l'objet, la valeur par défaut est true
. d. [[Valeur]] : contient la valeur des données de cet attribut, lisez-la à partir de cet emplacement ; lors de l'écriture de la valeur de l'attribut, enregistrez la nouvelle valeur à cet emplacement. Propriétés définies directement sur l'objet, la valeur par défaut est indéfinie
[2] La propriété accesseur ne contient pas de valeur de données , mais contient une paire de fonctions getter et setter (mais ces deux fonctions ne sont pas obligatoires). Lorsque la propriété accesseur est lue, la fonction getter est appelée, qui est chargée de renvoyer une valeur valide ; lorsque la propriété accesseur est écrite, la fonction setter est appelée et la nouvelle valeur est transmise, et cette fonction est chargée de décider comment pour gérer la fonction. Les propriétés accesseurs ont les 4 caractéristiques suivantes :
a. [[Configurable]] : indique si l'attribut peut être redéfini en supprimant l'attribut via la suppression, si les caractéristiques de l'attribut peuvent être modifiées ou si l'attribut peut être modifié en attribut accesseur. Propriétés définies directement sur l'objet, la valeur par défaut est true
b. [[Enumerable]] : Indique si l'attribut peut être renvoyé via une boucle for-in. L'attribut est défini directement sur l'objet. La valeur par défaut est true
. c, [[Get]] : Fonction appelée lors de la lecture des attributs. La valeur par défaut est indéfinie
d.[[Set]] : Fonction appelée lors de l'écriture des attributs. La valeur par défaut est indéfinie
6. Modifier les propriétés internes : Utilisez la méthode object.defineProperty() de ECMAScript5, qui reçoit trois paramètres : l'objet où se trouve la propriété, le nom de la propriété et un objet descripteur
[Note 1]IE8 est la première version du navigateur à implémenter la méthode Object.defineProperty(). Cependant, cette version de l'implémentation présente de nombreuses limitations : cette méthode ne peut être utilisée que sur des objets DOM, et seules les propriétés d'accesseur peuvent être créées. En raison d'une implémentation incomplète, il n'est pas recommandé d'utiliser la méthode Object.defineProperty() dans IE8
[Note 2]Les navigateurs qui ne prennent pas en charge la méthode Object.defineProperty() ne peuvent pas modifier [[Configurable]] et [[Enumerable]]
[1] Modifier les attributs des données

//直接在对象上定义的属性，Configurable、Enumerable、Writable为true
var person = {
  name:'cook'
};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'  

//不是在对象上定义的属性，Configurable、Enumerable、Writable为false
var person = {};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

//该例子中设置writable为false,则属性值无法被修改
var person = {};
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'  

//该例子中设置configurable为false,则属性不可配置
var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'

[Note] Une fois qu'une propriété est définie comme non configurable, elle ne peut pas être reconfigurable en configurable. Cela signifie que vous pouvez appeler Object.defineProperty() plusieurs fois pour modifier la même propriété, mais après avoir défini configurable sur false , là sont des restrictions

var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
//会报错
Object.defineProperty(person,'name',{
  configurable: true,
  value: 'Nicholas'
});

[2] Modifier les propriétés de l'accesseur

//简单的修改访问器属性的例子
var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
},
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year)//2005
alert(book.edition);//2

[Note 1] Spécifier uniquement getter signifie que l'attribut ne peut pas être écrit

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
  },
});
book.year = 2005;
alert(book.year)//2004  

[Note 2] Spécifier uniquement setter signifie que la propriété ne peut pas être lue

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year);//undefined

[Supplément] Utilisez deux méthodes non standard pour créer des propriétés d'accesseur : __defineGetter__() et __defineSetter__()

var book = {
  _year: 2004,
  edition: 1
};
//定义访问器的旧有方法
book.__defineGetter__('year',function(){
  return this._year;
});
book.__defineSetter__('year',function(newValue){
  if(newValue > 2004){
    this._year = newValue;
    this.edition += newValue - 2004;
  }
});
book.year = 2005;
alert(book.year);//2005
alert(book.edition);//2

7. Définir plusieurs propriétés : ECMAScript5 définit une méthode Object.defineProperties(), qui peut être utilisée pour définir plusieurs propriétés à la fois via des descripteurs. Cette méthode reçoit deux paramètres d'objet : Premier Le premier objet est. l'objet dont les propriétés doivent être ajoutées et modifiées. Les propriétés du deuxième objet correspondent bi-univoquement aux propriétés du premier objet à ajouter ou à modifier

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
});

八、读取属性特性：使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在对象和要读取其描述符的属性名称，返回值是一个对象。
[注意]可以针对任何对象——包括DOM和BOM对象，使用Object.getOwnPropertyDescriptor()方法

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  } 
});
var descriptor = Object.getOwnPropertyDescriptor(book,'_year');
alert(descriptor.value);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'undefined'

var descriptor = Object.getOwnPropertyDescriptor(book,'year');
alert(descriptor.value);//'undefined'
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'function'

以上就是关于javascript面向对象的详细内容介绍，希望对大家的学习有所帮助。