這篇文章主要介紹對Javascript物件字面量的理解,通俗易懂,需要的朋友可以參考下。
物件字面量的輸出方式以及定義好處
1.物件字面量的輸出方式有兩種:傳統的『。 ',以及數組方式,只不過用數組方式輸出時,方括號裡面要用引號括起來,如
var box = { name:'abc'; age:28 }; alert(box['name']);
給對象定義方法,
A:如果用傳統定義物件的方式,就需要先定義方法,然後再把這個方法名稱賦值給物件的一個屬性,如果要呼叫這個方法不加括號,就是回傳方法程式碼;如果要呼叫這個方法該物件屬性後面加上括號,就得到方法的回傳值
function objrun(){ return '123'; } var box = new Object(); box.name='abc'; box.age = 28; box.run = objrun; alert(box.run()); //结果为123 // alert(box.run); //结果为function objrun(){ return '123'; } //如果box.run = objrun(); //alert(box.run); //结果为123,如果带上圆括号,就报错啦
B:用字面量定義,只需要直接在物件的這個屬性上,寫function就行,這個function上面沒有函數名,他是個匿名函數,那怎麼呼叫這個方法呢,用物件的這個屬性名,要呼叫方法,同上就行
如:
var box = { name:'abc', age:28, run:function(){ return '123'; } } alert(box.run());
2.物件字面量的定義方式,可以輕鬆搞定函數大量參數需要一一對應輸出的情況。他的對策就是給函數傳入一個對象,而這個對像是用字面量的方式定義的,屬性和值對應的方式可以一目了然他們的關係,因為函數只是一段程式碼,必須呼叫才能執行
如:
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(){ // 对于当前字面量对象的调用,要加this关键字 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>
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
以上是Javascript物件字面量的理解(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!