Javascript對象字面量的理解

字號:


    這篇文章主要介紹對Javascript對象字面量的理解,通俗易懂,需要的朋友可以參考下。
    對象字面量的輸出方式以及定義好處
    1.對象字面量的輸出方式有兩種:傳統(tǒng)的‘。',以及數(shù)組方式,只不過用數(shù)組方式輸出時,方括號里面要用引號括起來,如
    var box = {
      name:'abc';
      age:28
    };
    alert(box['name']);
    給對象定義方法
    A:如果用傳統(tǒng)定義對象的方式,就需要先定義方法,然后再把這個方法名賦值給對象的一個屬性,如果要調(diào)用這個方法不加括號,就是返回方法代碼;如果要調(diào)用這個方法該對象屬性后面加上括號,就得到方法的返回值
    function objrun(){
      return '123';
    }
    var box = new Object();
    box.name='abc';
    box.age = 28;
    box.run = objrun;
    alert(box.run());       //結(jié)果為123
    // alert(box.run);       //結(jié)果為function objrun(){ return '123'; }
    //如果box.run = objrun();
    //alert(box.run);       //結(jié)果為123,如果帶上圓括號,就報錯啦
    B:用字面量定義,只需要直接在對象的這個屬性上,寫function就行,這個function上面沒有函數(shù)名,他是個匿名函數(shù),那怎么調(diào)用這個方法呢,用對象的這個屬性名,要調(diào)用方法,同上就行
    如:
    var box = {
      name:'abc',
      age:28,
      run:function(){
        return '123';
      }
    }
    alert(box.run());
    2.對象字面量的定義方式,可以輕松搞定函數(shù)大量參數(shù)需要一一對應(yīng)輸出的情況。他的對策就是給函數(shù)傳入一個對象,而這個對象是用字面量的方式定義的,屬性和值對應(yīng)的方式可以一目了然他們的關(guān)系,因為函數(shù)只是一段代碼,必須調(diào)用才能執(zhí)行
    如:
    function AA(obj){
      alert(obj.name);
      alert(obj.age);
    }
    var obj = {
      name: 'abc',
      age: 28
    }
    AA(obj);
    js對象字面量的demo
    /**
     * @author zhanghua
     */
    var literal = {
      add: function(){
        alert("add");
      },
      del: function(){
        alert("delete");
      },
      update: function(){
        alert("update");
      },
      name: "zhangsan",
      callLiteral: function(){
        // 對于當(dāng)前字面量對象的調(diào)用,要加this關(guān)鍵字
        this.add();
      }
    };
    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='javascript:alert(literal["name"])'"/>
        <input type="button" value="caller" onclick='javascript:literal.callLiteral()'"/>
      </body>
    </html>
    以上就是本文的全部內(nèi)容