Exemples pour expliquer les connaissances pertinentes sur les opérations sur les objets dans JavaScript_Basic knowledge

Du tableau à l'objet

var myarr = ['red','blue','yellow','purple']; 
myarr;// ["red","blue","yellow","purple"] 
myarr[0];//"red" 
myarr[3];//"purple' 

Tout le monde connaît les tableaux. On peut comprendre qu'une Clé correspond à une Valeur, et cette Clé est déjà par défaut dans le tableau (comme le code ci-dessus, ses clés sont 0, 1, 2, 3, et les valeurs sont rouge, bleu, jaune, violet).
Un objet peut alors être compris comme un tableau de clés personnalisées. Regardez le code suivant

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

À partir du code ci-dessus, nous pouvons comprendre :
1. Le nom de l'objet est héros.
2. Différent du tableau, le symbole '{' est utilisé à la place de '['
3. Les attributs de l'objet (tels que la race et la profession) sont séparés par des symboles ','
4.La syntaxe de Key et Value est KEY:VALUE
Il est également important de noter que peu importe si l'attribut (c'est-à-dire la clé) est placé entre guillemets doubles, guillemets simples ou sans guillemets, leurs résultats sont les mêmes. Le code suivant est le même

.

var obj={a:1,b:2}; 
var obj={'a':1,'b':2}; 
var obj={"a":1,"b":2}; 

La manière d'écrire recommandée est de ne pas mettre les attributs entre guillemets. Sauf si le nom de l'attribut est un symbole spécial, tel qu'un nombre, ou contient des espaces, etc.

Cet article est très simple. Il est à noter que le symbole pour définir un tableau est [], tandis que le symbole pour définir un objet est {}
.
Élément, attribut, méthode
Lors de l'apprentissage des tableaux, on peut dire que le tableau contient des éléments. Lorsqu'on parle d'objets, on peut changer l'instruction

.

var animal={ 
   name: 'dog', 
   run:function(){ 
    alert("running"); 
  } 
} 

name est une propriété, et run lui-même est une fonction. Dans cet objet, nous l'appelons une méthode.

Accéder aux propriétés d'un objet
Il existe deux manières d'accéder aux propriétés d'un objet.
Utilisez la forme d'un tableau tel que : animal['name']
Utilisez le point pour accéder : animal.name
La première méthode d'accès convient à toutes les situations. Mais si l'attribut est nommé de manière invalide, comme l'attribut nommé « 1nom » ou « mon nom » mentionné dans la section précédente, il est erroné d'y accéder avec des points. Cela doit être noté.

Regardons en détail un exemple d'accès aux objets

var book = { 
  name:'Javascript Fundation', 
  published:jixie. 
  author:{ 
    firstname:'nicholas', 
    lastname:'xia' 
  } 
}; 

1. Obtenez l'attribut prénom de l'objet auteur

book.author.firstname //nicholas

2. Récupérez l'attribut lastname de l'objet auteur. Essayons une autre façon d'écrire
.

book['author']['lastname'] //xia

Nous pouvons également utiliser des méthodes d'accès mixtes
book.author['lastname'] ou book['author'].lastname sont toutes des méthodes valides et doivent être utilisées de manière flexible

Lorsque les propriétés sont dynamiques, la méthode tableau pour accéder à l'objet est généralement utilisée.

var key ='lastname' 
book.author[key];//xia 

Appeler la méthode de l'objet

var hero = { 
breed: 'Turtle', 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
} 
hero.say(); 

La méthode d'accès aux objets est très simple, juste un petit peu suffit, mais vous pouvez aussi utiliser un tableau, ce qui a l'air bizarre
Tel que héros['say']();
Cette façon d'écrire n'est pas recommandée. Essayez d'utiliser des points lors de l'accès aux objets.

Modifier les propriétés et les méthodes
Javascript étant un langage dynamique, les propriétés et méthodes des objets peuvent être modifiées à tout moment. Voir l'exemple ci-dessous

var hero={}; 

le héros est un objet vide.

typeof hero.breed;//undefined 

Cela montre que l'objet héros n'a pas l'attribut race
Ensuite, vous pouvez ajouter des propriétés et des méthodes

hero.breed = 'turtle'; 
hero.name = 'Leonardo'; 
hero.sayName = function() {return hero.name;}; 

Méthode d'appel

 hero.sayName();//Leonardo

Supprimer l'attribut

delete hero.name;//true 
hero.sayName();//方法失败 

Ceci

var hero = { 
  name : 'Rafaelo', 
  sayName : function(){ 
   return this.name;   
 } 
} 
hero.sayName();//Rafaelo 

La signification de ceci est la signification de cet objet. Les questions complexes à ce sujet seront discutées plus tard.

Fonctions du constructeur
Une autre façon de créer un objet est d'utiliser un constructeur, il suffit de regarder l'exemple

function Hero(){ 
 this.name ='Refaelo'; 
} 
var hero = new Hero();
hero.name;//Refaelo

L'avantage de cette méthode est que vous pouvez passer des paramètres lors de la création d'un objet

function Hero(name){ 
  this.name = name; 
  this.whoAreYou = function(){ 
    return this.name; 
  } 
} 
 
var hi = new Hero('nicholas'); 
hi.whoAreYou();//nicholas 

Attention à ne pas jeter le nouvel opérateur. . .
Objet Global
Nous avons parlé des variables globales dans les dernières sections. Nous avons déjà dit que nous devrions essayer d'éviter d'utiliser des variables globales. Lorsque nous avons appris les objets, nous avons regardé ce qui arrivait aux variables globales. variables. L'objet a une propriété. Si l'environnement hôte est un navigateur Web, la variable globale est window.
Si on définit var a = 1;
On peut le comprendre ainsi :
Une variable globale a,
Comme attribut a de window Nous pouvons appeler window.a ou window['a']
. Regardons la fonction prédéfinie parseInt('123 m'); nous pouvons l'écrire sous la forme window.parseInt('123 m');

attribut constructeur
Une fois l'objet créé, un attribut caché est créé en arrière-plan, constructeur.

h2.constructor;//Hero(name)

Parce que l'attribut du constructeur est une référence à la fonction. Si vous ne vous souciez pas de la raison pour laquelle l'objet h2 est créé, mais que vous vous souciez uniquement de créer un nouvel objet similaire à h2, utilisez l'écriture suivante

var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas 

我们来看看如下写法的意思

var o = {}; 
o.constructor;//Object() 
typeof o.constructor;//"functions" 

其实就是隐藏了 new Object() ,更深的层次应用以后几个教程在说明。
 
instanceof 操作符
用instanceof来判断对象是否是指定的构造函数创建的。

function Hero(){ 
} 
var h = new Hero(); 
var o = {}; 
h instanceof Hero;//true 
h instanceof Object;//false 
o instanceof Object;//true 

 
 要注意的是instanceof 后面的是个引用 不是个函数 如错误写法 h instanceof Hero();//错误

函数返回对象
可以用构造函数来创建个对象，也可以通过普通函数返回对象来创建对象

function factory(name){ 
  return { 
   name:name 
 }; 
} 

用这个方法创建对象

var o = factory('one'); 
o.name

 
让我们接下来看看比较少见的构造函数返回对象的例子

function C(){ 
 this.a = 1; 
 return {b:2}; 
} 
 
var c2 = new C(); 
typeof c2.a //undefined 
c2.b; // 2 

 说明了 并不返回this了 而是返回了对象{b:2}。。这点要注意
 
传递对象
如果传递一个对象到函数里，那么传递的是个引用。如果改变了这个引用，也就会改变原始的对象。
下面是个对象赋值的例子

var original = {name:'nicholas'}; 
var copy =original; 
copy.name;//'nicholas'; 
copy.name = 'Jason'; 
original.name;// 'Jason'; 

 
修改了copy的属性name 也就等于修改了original的属性name
对象传参到函数中，也是同样的。

function modify(o){ 
  o.name ='Jason' 
} 
var original={name:'nicholas'}; 
modify(original); 
original.name;//Jason 

 
对象的比较
两个对象的比较如果是true的话，那么他们就是同一个对象的引用。

var fido ={breed:'dog'}; 
var benji ={breed:'dog'}; 
 
benji===fido; //false; 
benji==fido; //false; 

 
 以上的代码都不是同一引用，所以都是false