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

Cet article présente principalement les quatre façons de créer des objets en JavaScript, qui ont une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Mots clés

Objet. .create; new Object(); new Fn(); {}

Arrière-plan

Ce paragraphe peut être ignoré...
Dans une utilisation quotidienne, la manière la plus courante de créer un objet est de le créer directement en utilisant {}, où vous pouvez écrire directement des méthodes et des attributs, mais dans une pratique, l'objet créé de cette manière a été écrit dans un autre fichier js ; Je ne sais pas comment l'utiliser en HTML. Baidu a utilisé la méthode Object.create après une longue période. De manière inattendue, il a rencontré un nouveau piège. Cette méthode ne prend en charge que ES5 et versions ultérieures. ce sera Ces méthodes de création d'objets sont organisées pour une référence facile à l'avenir.

Méthode 1 : Object.create

1. Syntaxe

var newObj = Object.create(proto, propertyObject);
Paramètres :
proto : new L'objet prototype de l'objet créé
propertyObject : La propriété énumérable de l'objet nouvellement créé, équivalent au deuxième paramètre dans Object.defineProperty()
Valeur de retour : L'objet nouvellement créé

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};

var bb = Object.create(aa, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

Le résultat est : Les attributs auxquels bb peut accéder sont :
(1) ses propres foo et bar
(2) les valA et fnA de aa
Et, bb.__proto__ == aa

2.polyfill

Pour les navigateurs inférieurs à ES5 qui ne prennent pas en charge cette méthode, vous pouvez utiliser la méthode suivante pour la compatibilité, qui est également le polyfill d'Object.create ; 🎜>

if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
      if (typeof proto !== 'object' && typeof proto !== 'function') {
          throw new TypeError('Object prototype may only be an Object: ' + proto);
      } else if (proto === null) {
          throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
      }
      if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
      function F() {}
      F.prototype = proto;
      return new F();
  };
}

En bref, rappelez-vous une phrase, le prototype du nouvel objet est proto, proto est le premier paramètre d'Object.create

3. 🎜> Ci-joint deux photos, qui peuvent être utiles, 锵锵锵~~~~

D'accord, juste dans cas où je ne peux pas lutter La figure 1 montre que les nouvelles méthodes objet dans ES5 incluent create&keys et definitionProperty, les méthodes String incluent trim et les méthodes array incluent indexOf, filter&map et foreach. La figure 2 est un navigateur qui prend en charge ES5. Chrome le prend bien en charge, mais IE ne peut que mieux le prendre en charge dans IE11 Méthode 2 : nouveau constructeur

Cette méthode est également très intéressante ; couramment utilisé, en particulier pour l'héritage et ainsi de suite. Il a une meilleure évolutivité et encapsulation

Vous pouvez utiliser

function Person(){
    this.name = '****';
    this.age = 11,
    this.getAge = function(){}
}

pour imprimer p, qui est

Méthode 3 : new Object()

var p = new Person();

1. Créer un objet vide

{
    name: '****';
    age: 11,
    getAge: function(){},
    __proto__: Object
}
pp.constructor == Person  ==> **true**
Person.__proto__ == Function.prototype   ==> **true**

équivaut à

Vous pouvez continuer à étendre les propriétés et méthodes

var obj = new Object();

2.

var obj = {};

Le résultat est :

Cela signifie que oo est une copie superficielle de aa, ce qui est la même chose qu'un direct copie de l'objet.

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};
var oo = new Object(aa);

Je ne sais pas pourquoi je veux tester ça. . . .

oo === aa    ==> true
oo.valA = 2;
console.log(aa.valA)   ==> 2

Cette méthode est similaire à new Person car :

Object.__proto__ == Function.protoTypePerson.__proto__ == Function.protoTypeObject C'est le constructeur du objet, et son objet prototype est également le prototype de la fonction

Méthode 4 : {}

Cette méthode s'appelle :
Utiliser des littéraux d'objet pour créer des objets

, qui est la méthode la plus simple et la méthode que j'utilise souvent pour simplifier le processus de création d'objets avec un grand nombre de propriétés.

Quelqu'un a fait des tests, Cette méthode est plus rapide que d'utiliser new Object() pour créer des objets, car {} est évalué immédiatement et new Object() est essentiellement une méthode, puisqu'elle est une méthode, cela implique de parcourir la méthode dans le prototype. Lorsque la méthode est trouvée, les informations de pile nécessaires pour appeler la méthode seront générées une fois l'appel de méthode terminé, les informations de pile doivent être libérées, elles seront donc plus lentes. .

var person = {
   name: '*****',
   age: 11,
   getAge: function(){
    return this.age;
   },
   setAge: function(newAge){
    this.age = newAge;
   } 
}
调用时：
person.name
person['name']
扩展属性时：
person.hairColor = 'black';
person.getName = function(){};

Résumé

Il existe plusieurs méthodes couramment utilisées pour créer des objets. Celles que j'utilise le plus souvent sont la méthode quatre et la méthode deux. La méthode quatre est plus directe et rapide, et la méthode deux. est souvent utilisé pour faire de l'héritage, etc. ; la première méthode doit prendre en compte la question de la compatibilité avec ES5. Elle peut étendre les propriétés énumérables de certains nouveaux objets. J'ai toujours l'impression qu'elle a un lien avec DefineProperty, mais ce n'est pas le cas. je comprends encore très bien. S'il vous plaît, donnez-moi quelques conseils.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Similarités et différences entre les navigateurs et NodeJS EventLoop et certains mécanismes

Utiliser javascript pour déterminer le navigateur tapez

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!