SoFunction
Updated on 2025-03-03

Understanding of literal Objects of Javascript

How to output object literals and the benefits of definition

1. There are two ways to output object literals: traditional. ', and array method,However, when outputting in arrays, square brackets should be enclosed in quotes, such as

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

Define methods for objects,

A: If usedTraditionally defined objectsThe way,You need to define the method first, and then assign the method name to an attribute of the object. If you want to call this method without brackets, you will return the method code; if you want to call this method and add brackets after the object attribute, you will get the return value of the method.

function objrun(){
  return '123';
}
var box = new Object();
='abc';
 = 28;
 = objrun;
alert(());       //The result is 123// alert(); // The result is function objrun(){ return '123'; }//If = objrun();//alert();       //The result is123,If brackets are included,Just an error

B:Definition with literalJust write a function directly on this property of the object. There is no function name on this function, it is an anonymous function., then how to call this method? Use the object's property name and call the method, just the same as above

like:

var box = {
  name:'abc',
  age:28,
  run:function(){
    return '123';
  }
}
alert(());

2. The definition of object literals can easily solve the situation where a large number of functions parameters need to be output one by one. His countermeasure isPass an object to the function, and this object is defined in a literal way, and the corresponding properties and values ​​can be seen at a glance., because a function is just a piece of code and must be called to execute

like:

function AA(obj){
  alert();
  alert();
}
var obj = {
  name: 'abc',
  age: 28
}
AA(obj);

js object literal demo

/**
 * @author zhanghua
 */
var literal = {
  add: function(){
    alert("add");
  },
  del: function(){
    alert("delete");
  },
  update: function(){
    alert("update");
  },
  name: "zhangsan",
  callLiteral: function(){
    // For the call to the current literal object, add this keyword    ();
  }
};

html file:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Literal--Literal</title>
    <script type="text/javascript" src="jslib/"></script>
  </head>
  <body>
    <input type="button" value="add" onclick="javascript:()"/>
    <input type="button" value="delete" onclick="javascript:()"/>
    <input type="button" value="update" onclick="()"/>
    <input type="button" value="name" onclick="javascript:alert()"/>
    <input type="button" value="name" onclick='javascript:alert(literal["name"])'"/>
    <input type="button" value="caller" onclick='javascript:()'"/>
  </body>
</html>

The above is the entire content of this article. For more information about JavaScript, you can check it out:JavaScript Reference Tutorial》、《JavaScript Code Style Guide》, I hope everyone supports me more.