Javascript對象字面量的理解

更新時間：2016年06月22日 11:26:48 作者：沫魚

這篇文章主要介紹對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)容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。

您可能感興趣的文章: