Apprenez le javascript orienté objet et maîtrisez 9 façons de créer des compétences objets_javascript

Cet article partage 9 façons de créer des objets en JavaScript pour votre référence. Le contenu spécifique est le suivant

【1】Utiliser le constructeur d'objet
[Inconvénients] Utiliser la même interface pour créer de nombreux objets produira beaucoup de code en double

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
  　　alert(this.name);
　　}

【2】Utiliser des littéraux d'objet
[Inconvénients] Utiliser la même interface pour créer de nombreux objets produira beaucoup de code en double

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};

【3】Modèle d'usine : résume le processus de création d'objets spécifiques Considérant que les classes ne peuvent pas être créées dans ECMAScript, les développeurs ont inventé une fonction pour encapsuler les détails de la création d'objets avec une interface spécifique
[Inconvénients] Cela résout le problème de la création de plusieurs objets similaires, mais ne résout pas le problème de la reconnaissance des objets

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');

【4】Mode constructeur : aucun objet n'est créé explicitement, les attributs et méthodes sont directement affectés à cet objet, et il n'y a pas d'instruction de retour
[Inconvénients] Chaque méthode doit être recréée sur chaque instance

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");

【4.1】Mode d'expansion du constructeur : définition de la fonction de transfert en dehors du constructeur
[Inconvénient 1] Les fonctions définies dans la portée globale ne peuvent en réalité être appelées que par un certain objet, ce qui rend la portée globale un peu indigne de son nom
[Inconvénient 2] Si un objet doit définir de nombreuses méthodes, il doit définir de nombreuses fonctions globales. Ce type de référence personnalisé n'a aucune encapsulation
.

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);

【5】Modèle de prototype : Chaque fonction que nous créons a un attribut de prototype. Cet attribut est un pointeur pointant vers un objet, et le but de cet objet est de contenir des informations qui peuvent être partagées par toutes les instances d'un type spécifique. Propriétés et méthodes. Si vous le comprenez littéralement, prototype est l'objet prototype de l'instance d'objet créée en appelant le constructeur

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true

【5.1】Mode prototype plus simple : afin de réduire les entrées inutiles et de mieux encapsuler visuellement les fonctionnalités du prototype, réécrivez l'intégralité de l'objet prototype avec un littéral d'objet qui contient toutes les propriétés et méthodes.
[Inconvénient] Réinitialiser la propriété constructeur de cette manière entraînera la définition de son attribut [[Enumerable]] sur true La propriété native du constructeur n'est pas énumérable par défaut
.

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};

【5.2】Modèle de prototype pour résoudre d'innombrables problèmes

function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});

[Inconvénient du modèle de prototype 1] Le remplacement de l'objet prototype coupe la connexion entre le prototype existant et l'instance d'objet existante, et ils font toujours référence au prototype d'origine.

function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error

[Inconvénient du modèle de prototype 2] Le problème de partage des attributs de type référence est important

function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

【6】Modèle combiné : la combinaison d'un modèle de constructeur et d'un modèle de prototype est le moyen le plus courant de créer des types personnalisés. Le modèle de constructeur est utilisé pour définir les propriétés de l'instance, tandis que le modèle de prototype est utilisé pour définir les méthodes et les propriétés partagées. Ce mode mixte prend également en charge la transmission de paramètres au constructeur et constitue un mode par défaut utilisé pour définir les types de référence

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

【7】Mode prototype dynamique : encapsulez toutes les informations dans le constructeur et initialisez le prototype dans le constructeur (uniquement lorsque cela est nécessaire), tout en conservant les avantages de l'utilisation à la fois du constructeur et du prototype. En d’autres termes, vous pouvez décider d’initialiser le prototype en vérifiant si une méthode existante est valide.
[Note] Lors de l'utilisation du mode prototype dynamique, les littéraux d'objet ne peuvent pas être utilisés pour remplacer le prototype. Si vous remplacez le prototype alors qu'une instance a déjà été créée, vous romprez la connexion entre l'instance existante et la nouvelle instance

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

[8] Modèle de constructeur parasite : créez une fonction qui encapsule uniquement le code qui crée l'objet, puis renvoie l'objet nouvellement créé

function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

【Application de modèle de constructeur de parasites】Créez un tableau spécial avec des méthodes supplémentaires. Puisque le constructeur Array ne peut pas être modifié directement, ce modèle peut être utilisé

function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"  

[9] Modèle de constructeur sécurisé : l'objet dit sûr fait référence à un objet qui n'a pas de propriétés publiques et dont les méthodes n'y font pas référence. Les objets stables sont mieux utilisés dans certains environnements de sécurité (qui interdisent l'utilisation de ceux-ci et des nouveaux) ou pour empêcher les données d'être modifiées par d'autres applications.

function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

Voici neuf façons de créer des objets en JavaScript. J'espère que cela sera utile à l'apprentissage de chacun.