Comprendre les littéraux d'objet Javascript (tutoriel graphique)-js tutoriel-php.cn

Comprendre les littéraux d'objet Javascript (tutoriel graphique)

亚连

Libérer： 2018-05-21 09:37:17

original

1706 Les gens l'ont consulté

Cet article présente principalement la compréhension des littéraux d'objet Javascript. Il est facile à comprendre et les amis dans le besoin peuvent s'y référer.

Méthodes de sortie de littéraux d'objet et avantages de la définition

1 Il existe deux manières de générer des littéraux d'objet : traditionnelle '. ' et en mode tableau, Cependant, lors de la sortie en mode tableau, les crochets doivent être placés entre guillemets, tels que

var box = {
  name:&#39;abc&#39;;
  age:28
};
alert(box[&#39;name&#39;]);

Copier après la connexion

pour définir. méthodes pour les objets,

A : Si vous utilisez la manière traditionnelle de définir un objet , vous devez d'abord définir une méthode, puis attribuer la nom de la méthode à un attribut de l'objet. Si vous souhaitez appeler cette méthode sans parenthèses, le code de la méthode sera renvoyé ; si vous souhaitez appeler cette méthode avec des parenthèses après l'attribut de l'objet, vous obtiendrez la valeur de retour de la méthode

function objrun(){
  return &#39;123&#39;;
}
var box = new Object();
box.name=&#39;abc&#39;;
box.age = 28;
box.run = objrun;
alert(box.run());       //结果为123
// alert(box.run);       //结果为function objrun(){ return &#39;123&#39;; }
//如果box.run = objrun();
//alert(box.run);       //结果为123，如果带上圆括号，就报错啦

Copier après la connexion

B : Utilisez des littéraux pour définir , il suffit d'écrire la fonction directement sur cet attribut de l'objet. Il n'y a pas de fonction. nom sur cette fonction, c'est une fonction anonyme , alors comment l'appeler Quant à la méthode, utilisez le nom d'attribut de l'objet. Pour appeler la méthode, faites simplement la même chose que ci-dessus

Pour. exemple :

var box = {
  name:&#39;abc&#39;,
  age:28,
  run:function(){
    return &#39;123&#39;;
  }
}
alert(box.run());

Copier après la connexion

2. La façon dont le littéral d'objet est défini peut facilement gérer le grand nombre de paramètres requis par la fonction. L'un correspond à la situation de sortie. Sa contre-mesure consiste à passer un objet dans la fonction, et cet objet est défini de manière littérale. Les attributs et valeurs correspondants peuvent rendre leur relation claire en un coup d'œil , car la fonction n'est qu'un morceau. de code et doit être appelé Exécuter

tel que :

function AA(obj){
  alert(obj.name);
  alert(obj.age);
}
var obj = {
  name: &#39;abc&#39;,
  age: 28
}
AA(obj);

Copier après la connexion

démo du littéral d'objet js

/**
 * @author zhanghua
 */
var literal = {
  add: function(){
    alert("add");
  },
  del: function(){
    alert("delete");
  },
  update: function(){
    alert("update");
  },
  name: "zhangsan",
  callLiteral: function(){
    // 对于当前字面量对象的调用，要加this关键字
    this.add();
  }
};

Copier après la connexion

fichier html : <. 🎜>

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Literal--字面量</title>
    <script type="text/javascript" src="jslib/literal.js"></script>
  </head>
  <body>
    <input type="button" value="add" onclick="javascript:literal.add()"/>
    <input type="button" value="delete" onclick="javascript:literal.del()"/>
    <input type="button" value="update" onclick="literal.update()"/>
    <input type="button" value="name" onclick="javascript:alert(literal.name)"/>
    <input type="button" value="name" onclick=&#39;javascript:alert(literal["name"])&#39;"/>
    <input type="button" value="caller" onclick=&#39;javascript:literal.callLiteral()&#39;"/>
  </body>
</html>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.