집 > 기사 > 웹 프론트엔드 > Javascript 객체 리터럴 이해(그래픽 튜토리얼)

Javascript 객체 리터럴 이해(그래픽 튜토리얼)

亚连원래의: 2018-05-21 09:37:171641검색

이 글은 주로 Javascript 객체 리터럴에 대한 이해를 소개하며 이해하기 쉽고 도움이 필요한 친구들이 참고할 수 있습니다.

객체 리터럴 출력 방법 및 정의 이점

1. 객체 리터럴을 출력하는 방법에는 전통적인 '. ', 배열 모드, 그러나 배열 모드로 출력할 때는 대괄호를 따옴표로 묶어야 합니다. 예:

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

define method for object,

A: 기존 개체 정의를 사용하는 경우 이런 식으로 먼저 메서드를 정의한 다음 개체의 속성에 메서드 이름을 할당해야 합니다. 대괄호 없이 이 메서드를 호출하려면 메서드 코드가 반환됩니다. 객체 속성 뒤에 괄호가 있는 메소드, 메소드의 반환 값을 얻으려면

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

리터럴 정의를 사용하세요,객체의 이 속성에 직접 함수를 작성하면 됩니다. 함수 이름은 없습니다. 이 함수는 익명 함수이므로, 이 메서드를 호출하려면 개체의 속성 이름을 사용하세요. 메서드를 호출하려면 위와 동일하게 하면 됩니다.

예:

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

2. 객체 리터럴은 많은 수의 함수 매개변수를 일대일 대응으로 출력해야 하는 상황을 쉽게 처리할 수 있습니다. 그의 대응책은 객체를 함수에 전달하는 것인데, 이 객체는 문자 그대로 정의되어 있으며, 해당 속성과 값은 함수가 단지 코드 조각이고 호출되어야 하기 때문에 그 관계를 한눈에 알 수 있습니다. 예를 들면 :

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

js object literal deco

/**
 * @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>

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Javascript 객체 리터럴 이해(그래픽 튜토리얼)

관련 기사