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