Home > Article > Web Front-end > Understanding Javascript object literals (graphic tutorial)

Understanding Javascript object literals (graphic tutorial)

亚连Original: 2018-05-21 09:37:171640browse

This article mainly introduces the understanding of Javascript object literals. It is easy to understand and friends in need can refer to it.

Object literal output methods and definition benefits

1. There are two output methods for object literals: traditional ‘. ', and array mode, But when outputting in array mode, the square brackets must be enclosed in quotation marks, such as

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

Define methods for objects,

A: If you use the traditional way of defining an object, you need to define the method first, and then assign the method name to an attribute of the object. If you want Calling this method without parentheses will return the method code; if you want to call this method with parentheses after the object attribute, you will get the return value of the method

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，如果带上圆括号，就报错啦

B:Use Literal definition , just need to write function directly on this attribute of the object. There is no function name on this function. It is an anonymous function . So how to call this method? Use To call a method using this property name of an object, just do the same as above

For example:

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

2. The definition of object literals can easily handle the situation where a large number of function parameters need to be output in one-to-one correspondence. His solution is to pass an object into the function, and this object is defined in a literal way. The corresponding properties and values can make their relationship clear at a glance , because the function is just a piece of code and must be called. Execute

For example:

function AA(obj){
  alert(obj.name);
  alert(obj.age);
}
var obj = {
  name: &#39;abc&#39;,
  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(){
    // 对于当前字面量对象的调用，要加this关键字
    this.add();
  }
};

html file:

<?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>

The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.

##js Summary of common methods of string() (graphic tutorial)

What are the methods for php to read local json files

The above is the detailed content of Understanding Javascript object literals (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Regular expressions (grammar)Next article：Regular expressions (grammar)

See more

Understanding Javascript object literals (graphic tutorial)

Related articles