9 façons de créer des objets en JavaScript

————————————————————————————————————— —————— ————————

Créer un objet

Marquer

Mode quasi-objet

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

Forme littérale

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

Mode Usine

• Résume le processus de création d'objets spécifiques et utilise des fonctions pour encapsuler les détails de la création d'objets avec des interfaces spécifiques

• Avantages : Peut créer des objets similaires à plusieurs reprises

• Inconvénients : Impossible d'effectuer la reconnaissance d'objets

  <>

"use strict";
// 工厂模式
function createPerson(name, age, job) {    
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }    
    return o;
}
var person1 = createPerson("name1", 1, "hehe");
console.log(person1);

Modèle de constructeur

• Avantages :

  Oui Résoudre le problème des objets méconnaissables dans la fonction usine

  Créer des objets sans affichage, attribuer directement des propriétés et des méthodes à cet Objet, il n'y a pas de return déclaration

• Inconvénients :

  dans Dans ce cas, chaque < L'objet 🎜>Person contient l'essence d'une instance Function différente. La création de fonctions de cette manière entraînera différentes chaînes de portée et résolution d'identifiant, mais. le mécanisme de création de nouvelles instances de Fonction reste le même. Et si la méthode est placée dans la portée globale, le type de référence personnalisé n'a aucune encapsulation

• via nouveauMot clé pour créer un constructeur personnalisé

• La création d'un constructeur personnalisé signifie que ses instances peuvent être identifiées comme un trait dans le futur. Le constructeur de type

• est défini dans l'objet Global 🎜>

Étapes réelles pour appeler le constructeur :
Créer un nouvel objet
Attribuer le portée du constructeur vers le nouvel objet (

• ceci pointe vers l'objet)

Exécuter le code dans le constructeur (ajouter des propriétés au nouvel objet)
Renvoyer le nouvel objet

"use strict";
// 构造函数模式
function Person(name, age, job) {    
    this.name = name;    
    this.age = age;    
    this.job = job;    
    this.sayName = function() {
        console.log(this.name);
    }
}
var person1 = new Person("name2", 2, "hehe");
console.log(person1);
// 检测对象类型
console.log(person1.constructor == Object); // false
console.log(person1.constructor == Person); // true
console.log(person1 instanceof Object); // true
console.log(person1 instanceof Person); // true
// 当作构造函数使用
var person2 = new Person("name3", 3, "hehe");
person2.sayName();
// 作为普通函数调用
// Person("name4", 4, "hehe"); 
// 添加到window,严格模式下无法访问
// window.sayName(); 
// name4
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "name5", 5, "111"); // 在对象o中调用
o.sayName(); // o就拥有了所有属性和sayName()方法
// 创建两个完成同样任务的Function实例是没必要的,有this对象在,不需要在执行代码前就把函数绑定到特定对象上面
console.log(person1.sayName == person2.sayName); // false,但方法是相同的
// 通过把函数定义转移到构造函数外来解决
function Person2(name, age, job) {    
    this.name = name;    
    this.age = age;    
    this.job = job;    
    this.sayName = sayName2;
}
function sayName2() { // 在这种情况下person1和person2共享同一个全局函数
    console.log(this.name);
}
var person1 = new Person2("name6", 6, "hehe");
var person2 = new Person2("name7", 7, "hehe");
console.log(person1.sayName == person2.sayName); // true

Mode Prototype

• Avantages :
  Peut résoudre le problème du modèle de constructeur créant plusieurs instances de méthode

  permet à toutes les instances d'objet de partager les propriétés et méthodes contenues dans le prototype. Il n'est pas nécessaire de définir les informations de l'instance d'objet dans le constructeur, mais peut directement ajouter les informations à l'objet prototype

• Inconvénients :

  Toutes les propriétés du prototype sont partagées par de nombreuses instances, pour contenir des références Pour attributs de valeurs de type (tableaux, etc.), c'est (un gros problème)

  Le lien de transmission des paramètres d'initialisation au constructeur est donc omis. , toutes les instances sont La même valeur d'attribut sera obtenue et les paramètres doivent être transmis séparément (cela ne devrait pas poser de problème)

  Tellement peu de personnes utilisent le mode prototype seul, voir l'utilisation complète ci-dessous

• Chaque fonction que nous créons a un prototype (prototype) attribut, qui est un pointeur vers Pointeur vers l’objet.

• Compréhension des prototypes :

  Chaque fois qu'une nouvelle fonction est créée, elle sera basée sur un ensemble spécifique de règles Créez un attribut prototype pour la fonction, qui pointe vers l'objet prototype de la fonction.

  Par défaut, tous les objets prototypes obtiennent une propriété constructor (constructeur), contenant un pointeur vers prototype pointeur vers la propriété

  dans l'instance, Person.prototype.constructor → Person , vous pouvez continuer à ajouter d'autres propriétés et méthodes à l'objet prototype via le constructeur

  Après avoir créé un constructeur personnalisé, l'objet prototype n'obtient que < par défaut 🎜>attribut constructeur, les autres méthodes sont héritées de Object, le pointeur du prototype s'appelle [[prototype]], mais aucune méthode d'accès n'est fournie dans le script. Cet attribut n'est pas visible dans les autres implémentations, mais le navigateur ajoute un attribut _proto_ à l'objet.

  La connexion du pointeur prototype existe entre l' instance et l'objet prototype du constructeur, et non entre l'instance et le constructeur.

  Illustration :

  

  

• À propos des attributs du prototype :

  Instance : personne1, prototype : Personne

  Lors de la recherche d'attributs, recherchez d'abord si les attributs dans personne1 ont nom, si c'est le cas, retournez La valeur de person1.name, sinon recherchez le prototype Person pour voir s'il y a name , se référer au prototype La différence entre la structure de la chaîne et de l'objet

• dans opérateur et hasOwnProperty() :

  in操作符：无论属性是在实例还是原型中，都返回true，只有在不存在的情况下才会false

  hasOwnProperty(): 只有在调用的实例或原型中的属性才会返回true

• 案例中整个重写原型的问题图解：

  

  <>

"use strict";
// *****************************************************************
// 原型模式
function Person() {};
Person.prototype.id = 0;
Person.prototype.name = "name0";
Person.prototype.sayName = function() {
    console.log(this.name);
};

var person1 = new Person();
person1.sayName();
var person2 = new Person();
person2.name = "name2";
person2.sayName();
console.log(person1.sayName == person2.sayName);
Person.prototype.name = "111"; // 对原型中的初始值修改后,所有的子实例都会修改初始值
person1.sayName();
person2.name = "222";
person2.sayName();
delete person2.name; // 删除person2.name
person2.sayName(); // 111,来自原型

// *****************************************************************
// isPrototypeOf():确定原型关系的方法
console.log(Person.prototype.isPrototypeOf(person1)); // true
var person3 = new Object();
console.log(Person.prototype.isPrototypeOf(person3)); // false
// getPrototypeOf():返回原型[[prototype]]属性的方法
// in操作符
console.log(Object.getPrototypeOf(person2)); // 包含Person.prototype的对象
console.log(Object.getPrototypeOf(person2) == Person.prototype); // true
console.log(Object.getPrototypeOf(person2).name); // 111,初始值

// hasOwnProperty():检测一个属性是唉实例中还是在原型中
console.log(Person.hasOwnProperty("name")); // true
console.log(person1.hasOwnProperty("name")); // false 在上面的操作中没有为person1添加name
console.log("name" in person1); // true
person2.name = "333";
console.log(person2.hasOwnProperty("name")); // true
console.log("name" in person2); // true

// p.s.Object.getOwnPropertyDescriptor()方法必须作用于原型对象上
console.log(Object.getOwnPropertyDescriptor(person1, 'name')); // undefined
console.log(Object.getOwnPropertyDescriptor(Person, 'name')); // Object{...}

// *****************************************************************
// 简单写法
// 以对象字面量的形式来创建新的对象原型
// p.s.此时constructor属性不再指向Person,而是指向Object,因为此处重写了整个对象原型
function Per() {};
Per.prototype = {
    id: 0,
    name: "Per_name",
    sayName: function() {
        console.log(this.name);
    }
}
// 在该写法中要重写constructor属性,如果直接重写constructor属性会导致[[Enumberable]]=true,可枚举,原生的constructor属性不可枚举
// 正确的重写方法
Object.defineProperty(Per.prototype, "constructor", { enumberable: false, value : Per });
var per1 = new Per();
console.log(person1.constructor); // Person()
console.log(per1.constructor); // Per(),如果不加constructor:Per返回Obejct()

// 图解见上部
// 如果直接重写整个原型对象,然后在调用per1.sayName时候会发生错误,因为per1指向的原型中不包含以改名字明明的属性,而且整个重写的对象无法修改
// function Per() {};
// var per1 = new Per();
// Per.prototype = {
//     constructor:Per,
//     id: 0,
//     name: "Per_name",
//     sayName: function() {
//         console.log(this.name);
//     }
// }
// var per2 = new Per();
// per1.sayName(); 
// error
// per2.sayName(); 
// Per_name
// *****************************************************************
// 问题
// 对一个实例的数组进行操作时,其他所有实例都会跟随变化
function Per2() {};
Per2.prototype = {
    constructor:Per2,
    id: 0,
    name: "Per_name",
    arr : [1,2]
}
var per3 = new Per2();
var per4 = new Per2();
console.log(per3.arr); // [1, 2]
console.log(per4.arr); // [1, 2]
per3.arr.push("aaa");
console.log(per3.arr); // [1, 2, "aaa"]
console.log(per4.arr); // [1, 2, "aaa"]
console.log(per3.arr === per4.arr); // true

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

• 是最常见的方式，构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。

• 优点：

  每个实例都有自己的一份实例属性的副本， 同时又共享着对方法的引用，最大限度节省内存。

  支持向构造函数传递参数

  <>

"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {    
    this.id = id;    
    this.name = name;    
    this.friends = [1, 2, '3'];
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}
var person1 = new Person(1,"p1_name");
var person2 = new Person(2,"p2_name");
person1.friends.push("4");
console.log(person1.friends); // 1,2,3,4 不会相互影响
console.log(person2.friends); // 1,2,3
console.log(person1.friends === person2.friends); // false
console.log(person1.sayName === person2.sayName); // true 共用一个代码块

动态原型模式

• 将所有信息都封装在构造函数中，通过在构造函数中初始化原型（必要情况下）由保持了同时使用构造函数和原型的优点

• 优点：

  可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型

• p.s.

  在该模式下不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型，会切断现有实例和新原型之间的联系。

  <>

"use strict";
// *****************************************************************
// 组合使用构造函数模式和原型模式
function Person(id, name) {    
    this.id = id;    
    this.name = name;    
    this.friends = [1, 2, '3'];    
    // 只有在sayName()方法不存在的情况下,才会将它添加到原型中
    // if这段代码只会在初次调用构造函数时才会执行
    // 这里对原型所做的修改,能够立即在所有实例中得到反映
    if (typeof this.sayName != "function") {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }
}
var person1 = new Person(1,"hugh");
person1.sayName();

寄生构造函数模式

• 在前几种模式不适用的情况下，可以使用寄生（parasitic）构造函数模式

• 创建一个函数，仅封装创建对象的代码，然后返回新创建的对象

• 和工厂模式的区别：使用new操作，并把使用的包装函数叫做构造函数

• 使用场景：假设我们想创建一个具有额外方法的特殊数组，由于不能直接修改Array构造函数，就可以使用这个模式（见代码）

• p.s.

  返回的对象与构造函数或与构造函数的原型属性之间没有关系，也就是说，构造函数返回的对象与在构造函数外部创建的对象没有不同

  不能依赖instanceof操作符来确定对象类型

  如果可以使用其他模式的情况下，不要使用这种模式

  <>

"use strict";
// *****************************************************************
function Person(id, name) {    
    var o = new Object();
    o.id = id;
    o.name = name;
    o.sayName = function() {
        console.log(this.name);
    }    
    return o; // 返回新创建的对象
}
var person1 = new Person(1, "111");
person1.sayName();

// 模拟使用场景
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);
console.log(colors.toPipedString());

稳妥构造函数模式

• 所谓稳妥对象，指的是没有公共属性而且其方法也不引用this的对象

• 使用场景：

  安全的环境中（这些环境会禁止使用this和new）

  防止数据被其他应用程序（如Mashup程序）改动时使用

• 与寄生构造函数模式的区别：

  新建对象时不引用this

  不适用new操作符构造函数

• 与寄生构造函数模式类似，该模式创建的对象与构造函数之间也没有什么关系，instanceof操作符也无意义

  <>

"use strict";
// *****************************************************************
function Person(id, name) {    
    var o = new Object();
    o.id = id;
    o.name = name;    
    // p.s.在该模式下,除了sayName()方法外,没有其他办法访问name的值
    o.sayName = function() {
        console.log(name);
    }    
    return o;
}
var person1 = Person(1, "111");
person1.sayName();
// console.log(personn1.name); // Error:person1 is not defined

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!