Understanding Javascript object literals (graphic tutorial)-JS Tutorial-php.cn

Understanding Javascript object literals (graphic tutorial)

亚连

Release： 2018-05-21 09:37:17

Original

1676 people have browsed it

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;]);

Copy after login

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

Copy after login

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());

Copy after login

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);

Copy after login

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();
  }
};

Copy after login

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>

Copy after login

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!