7 modèles pour créer des objets en JavaScript-js tutoriel-php.cn

ECMA-262 définit un objet comme : "Une collection sans attributs, dont les attributs peuvent contenir des valeurs de base, des objets ou des fonctions." À strictement parler, cela équivaut à déclarer qu'un objet est un ensemble de valeurs en aucun cas. commande spécifique. Chaque propriété ou méthode d'un objet a un nom et chaque nom correspond à une valeur. Pour cette raison, nous pouvons considérer les objets ECMAScript comme des tables de hachage : rien de plus qu'un ensemble de paires de noms, où les valeurs peuvent être des données ou des fonctions.

Le moyen le plus simple de créer un objet personnalisé est de créer une instance d'Object, puis d'y ajouter des propriétés et des méthodes, comme indiqué ci-dessous :

var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";

person.sayName = function(){
    alert(this.name);
}

Copier après la connexion

L'exemple ci-dessus crée un objet nommé personne et lui ajoute trois propriétés et une méthode. La méthode sayName() est utilisée pour afficher l'attribut name, et this.name sera analysé comme person.name. Les premiers développeurs ont souvent utilisé ce mode pour créer des objets. Plus tard, la méthode littérale d'objet est devenue le mode préféré pour créer des objets. ci-dessus L'exemple utilisant la syntaxe littérale d'objet peut être écrit comme suit :

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

Copier après la connexion

L'objet personne dans cet exemple est le même que l'objet précédent et a les mêmes propriétés et méthodes.

Bien que les méthodes constructeur d'objet ou littéral d'objet puissent être utilisées pour créer un seul objet, ces méthodes présentent un inconvénient évident : elles sont créées en utilisant la même interface. les objets généreront beaucoup de code répété. Pour résoudre ce problème, les gens ont commencé à utiliser une variante du modèle d'usine.

1 Modèle d'usine

Le modèle d'usine est un modèle de conception bien connu dans le domaine du génie logiciel. Ce modèle fait abstraction du 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, comme indiqué ci-dessous :

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("wei",25,"software");
var person2 = createPerson("bu",25,"software");

Copier après la connexion

La fonction createPerson() peut être basée sur les paramètres acceptés. pour construire un objet Person contenant toutes les informations nécessaires. Cette fonction peut être appelée plusieurs fois, et à chaque fois elle renverra un objet contenant trois propriétés et une méthode. Bien que le modèle d'usine résolve le problème de la création de plusieurs objets similaires, il ne résout pas le problème de l'identification des objets, c'est-à-dire comment savoir de quel type d'objet il s'agit.

2 Modèle de constructeur

Les constructeurs natifs comme Array et Object apparaîtront automatiquement dans l'environnement d'exécution au moment de l'exécution. De plus, nous pouvons créer des constructeurs personnalisés pour définir les propriétés et les méthodes des types personnalisés. Par exemple, on peut réécrire l'exemple précédent en utilisant un constructeur :

function Person(name, age, job){    
this.name = name;    
this.age = age;    
this.job = job;    
this.sayName = function(){        
alert(this.name);    
}}
var person1 = new Person("wei",25,"software");
var person2 = new Person("bu",25,"software");

Copier après la connexion

Dans cet exemple, la fonction Person() remplace la fonction createPerson(). On remarque la différence entre Person() et createPerson(). La différence est :

Il n'y a pas de création explicite de l'objet
Attribuez directement des propriétés et des méthodes à cet objet
Il n'y a pas de déclaration de retour

De plus, vous devez également remarquer que le nom de la fonction Personne utilise la lettre majuscule P. Par convention, les constructeurs doivent toujours commencer par une lettre majuscule, et les non-constructeurs doivent toujours commencer par une lettre minuscule. Cette approche est empruntée à d'autres langages OO, principalement pour la distinguer des autres fonctions d'ECMAScript. Le constructeur lui-même étant également une fonction, il peut simplement créer des objets.

Pour créer une instance Person, vous devez utiliser l'opérateur new. La méthode ci-dessus passera par les quatre étapes suivantes :

1. Créer un nouvel objet

2. Attribuer la portée du constructeur au nouvel objet (donc cela pointe vers ce nouvel objet)

3. Exécutez le code dans le constructeur

4. Renvoyez le nouvel objet

Une instance différente. Les deux objets ont un attribut constructeur qui pointe vers Person. Comme suit :

L'attribut constructeur d'un objet est initialement utilisé pour identifier le type d'objet. Cependant, lorsqu'il s'agit de détecter des types d'objets, l'opérateur instanceof est plus fiable. Les objets que nous créons dans cet exemple sont tous des instances de l'objet Object et sont également des instances de l'objet Person. Cela peut être vérifié via l'opérateur instanceof.

console.log(person1.constructor == Person);     //true
console.log(person2.constructor == Person);     //true
console.log(person1.constructor == Person);     //true
console.log(person2.constructor == Person);     //true

Copier après la connexion

Créer un constructeur personnalisé signifie qu'à l'avenir, son instance pourra être identifiée comme un type spécifique ; et c'est là que le modèle de constructeur bat le modèle d'usine ; Dans cet exemple, la raison pour laquelle person1 et person2 sont toutes deux des instances de Object est que tous les objets héritent de Object.

console.log(person1 instanceof Object);     //true
console.log(person1 instanceof Person);     //true
console.log(person2 instanceof Object);     //true
console.log(person2 instanceof Person);     //true

Copier après la connexion

Le principal problème du constructeur est que chaque méthode doit être recréée sur l'instance, provoquant un gaspillage de mémoire. Dans l'exemple précédent, person1 et person2 ont tous deux une méthode nommée sayName(), mais les deux méthodes ne sont pas des instances de la même fonction. N'oubliez pas que les fonctions dans ECMAScript sont aussi des objets, donc chaque fois que vous définissez une fonction, vous instanciez un objet. D'un point de vue logique, le constructeur à ce moment peut être défini comme ceci :

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

Copier après la connexion

从这个角度来看构造函数，更容易看明白每个Person实例都会包含一个不同的Function实例的本质。说明白些，会导致不同的作用域链和标识符解析，但是创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的，以下代码可以证实这一点。

alert(person1.sayName == person2.sayName);  //false

Copier après la connexion

然而，创建两个完成同样任务的Function实例的确没有必要；况且有this对象在，根本不用在执行代码前就把函数绑定到特定的对象上。因此，可以像下面这样，通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){    
this.name = name;    
this.age = age;    
this.job = job;    
this.sayName = sayName;}
function sayName(){    
alert(this.name);

Copier après la connexion

这样做解决了多个函数解决相同问题的问题，但是有产生了新的问题，在全局作用域中实际上只被某个对象调用，这让全局对象有点名不副实。更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在这些问题可以使用原型模式来解决。

3 原型模式

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的实例就是让所有实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象的实例信息，而是可以将这些信息直接添加到原型对象中，如下所示：

function Person(){
}
Person.prototype.name = "wei";
Person.prototype.age = 27;
Person.prototype.job = "Software";
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
person1.sayName();      //"wei"

var person2 = new Person();
person2.sayName();      //"wei"

alert(person1.sayName == person2.sayName);

Copier après la connexion

在此，我们将sayName()方法和所有的属性直接添加在了Person的prototype属性中，构造函数变成了空函数。即便如此，我们仍然可以通过构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但是与构造函数不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理，就必须先理解ECMAScript中原型对象的性质。

原型对象的本性由于篇幅太长将会在下一章节详细分析。上面我们说了原型模式的好处，接下来我们来看一下原型模式的缺点。原型模式省略了为构造函数传递参数的这一环节，结果所有实例在默认情况下都具有相同的属性值。这会在某些程度上带来一种不便，这并不是原型模式最大的问题，因为如果我们想为一个通过原型模式创建的对象添加属性时，添加的这个属性就会屏蔽原型对象的保存的同名属性。换句话说，就是添加的这个属性会阻止我们去访问原型中的属性，但并不会改变原型中的属性。

原型模式最大的问题是由其共享的本质所导致的。原型中所有的属性被很多实例共享，这种共享对函数非常合适，对包含基本值的属性也说的过去，但是对引用类型的属性值来说问题就比较突出了，下面我们来看一个例子：

function Person(){}Person.prototype = {    
constructor:Person,    
name:"wei",    
age:29,    
friends:["乾隆","康熙"],    
sayName:function(){        
alert(this.name);    
}}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("嬴政");
console.log(person1.friends);   //["乾隆","康熙","嬴政"]
console.log(person2.friends);   //["乾隆","康熙","嬴政"]
console.log(person1.friends === person2.friends);   //true

Copier après la connexion

上面的例子中，Person.prototype对象有一个名为friends的属性，该属性包含一个字符串数组。然后创建了两个Person的实例，接着修改person1.friends引用的数组，向数组中添加一个字符串，由于数组存在于Person.prototype中而不是person1中，所以person2.friends也会被修改。但是一般每个对象都是要有属于自己的属性的，所以我们很少看到有人单独使用原型模式来创建对象。

4 组合使用构造函数模式和原型模式

创建自定义类型最常见的方式就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度的节省了内存。另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。下面的代码重写了前面的例子：

function Person(name, age){    
this.name = name;    
this.age = age;    
this.friends = ["乾隆","康熙"];}
Person.prototype = {    
constructor:Person,    
sayName:function(){        
alert(this.name);    
}}
var person1 = new Person("wei",29);
var person2 = new Person("bu",25);
person1.friends.push("嬴政");
console.log(person1.friends);   //["乾隆", "康熙", "嬴政"]
console.log(person2.friends);   //["乾隆", "康熙"]
console.log(person1.friends === person2.friends);   //false
console.log(person1.sayName === person2.sayName);   //true

Copier après la connexion

在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。所以修改了person1.friends并不会改变person2.friends，因为他们分别引用了不同的数组。

这种构造函数与原型模式混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用的一种默认形式。

5 动态原型模式

有其他OO语言经验的开发人员在看到独立的构造函数和原型时，很可能会感到非常的困惑。动态原型模式就是用来解决这个问题的一个方案，它把所有的信息都封装在了构造函数中，而通过构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否要初始化原型。来看一个例子：

function Person(name, age){    
this.name = name;    
this.age = age;    
this.friends = ["乾隆","康熙"];    
//注意if语句    
if(typeof this.sayName!="function"){        
Person.prototype.sayName = function(){            
alert(this.name);        
}    
}}
var person1 = new Person("wei",29);
person1.friends.push("嬴政");
person1.sayName();

Copier après la connexion

注意构造函数代码中的if语句，这里只在sayName()方法不存在的情况下才会将它添加到原型中。这断代码只有在第一次调用构造函数的时候才会被执行。此后，原型已经被初始化，不需要再做什么修改。不过要记住，这里所做的修改能立即在所有实例中得到反映。因此，这种方法可以说确实非常完美。其中if语句检查的是初始化之后应该存在的任何方法和属性–不必再用一大堆if来检查每个属性和方法，只检查其中一个即可。对于采用这样模式创建的对象，还可以使用instanceof操作符来确定他的类型。

注意：使用动态原型模式时，不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型，那么就会切断现有的实例与新原型之间的联系。

6 寄生构造函数模式

通常，在上述几种模式都不适合的情况下可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象，但从表面看，这个函数又很像典型的构造函数。来看一个例子：

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 person = new Person("wei",29,"banzhuan");
person.sayName();   //"wei"

Copier après la connexion

在这个例子中，Person函数创建了一个对象，并以相应的属性和方法初始化该对象，然后返回了这个对象。除了使用new操作符把使用的包装函数叫做构造函数之外，这个模式和工厂模式并没有多大的区别。构造函数在不返回值的情况下，会默认返回新对象的实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

这个模式可以在特殊的情况下来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数，因此可以使用这个模式：

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");
console.log(colors.toPipedString());    //red|blue|green

Copier après la connexion

在这个例子中，我们创建了一个名为SpecialArray的构造函数。在这个函数的内部，首先创建了一个数组，然后push()方法初始化了数组的值。随后又给数组实例添加了toPipedString()方法，用来返回以竖线分隔的数组值。最后将数组以函数的形式返回。接着，我们调用了SpecialArray构造函数，传入了初始化的值，并调用了toPipedString()方法。

关于寄生构造函数模式，有一点需要声明：首先，返回的对象与构造函数或者构造函数的原型没有任何关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此，不能依赖instanceof操作符来确定对象的类型。由于存在这一的问题，我们建议在可以使用其他模式的情况下不要使用这种模式。

7 稳妥构造函数模式

道格拉斯·克拉克福德发明了JavaScript中的稳妥对象这个概念。所谓稳妥对象，是指没有公共属性，而且其方法也不引用this对象。稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或者在防止数据被其他应用程序改动时使用。稳妥构造函数遵循的与寄生构造函数类似的模式，但又两点不同：一是新创建对象的实例方法不引用this；二是不使用new操作符调用构造函数。按照稳妥构造函数的要求，可以将前面的Person构造函数重写如下：

function Person(name, age, job){
    //创建要返回的新对象
    var o = new Object();

    //可以在这里定义私有变量和函数

    //添加方法
    o.sayName = function(){
        alert(this.name);
    };

    //返回对象
    return o;
}

Copier après la connexion

注意，在以这种模式创建的对象中，除了使用sayName()方法之外，没有其他办法访问name的值。可以像下面使用稳妥的Person构造函数：

var person =Person("weiqi",22,"banzhuan");
person.sayName();   //weiqi

Copier après la connexion

这样，变量person中保存的是一个稳妥对象，而除了sayName()方法外，没有别的方式可以访问其他数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的办法访问传入到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性，使得他非常适合在某些安全执行环境–例如，ADsafe(www.adsafe.org)提供的环境下使用。

Remarque : Semblable au modèle de constructeur parasite, il n'y a aucune relation entre l'objet créé à l'aide du modèle de constructeur sécurisé et le constructeur, donc l'opérateur instanceof n'a pas de sens pour de tels objets.

Ce qui précède est le contenu des 7 modes de création d'objets en JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !