首頁 > 文章 > web前端 > Javascript物件字面量的理解（圖文教學）

Javascript物件字面量的理解（圖文教學）

亚连原創: 2018-05-21 09:37:171641瀏覽

這篇文章主要介紹對Javascript物件字面量的理解,通俗易懂,需要的朋友可以參考下。

物件字面量的輸出方式以及定義好處

1.物件字面量的輸出方式有兩種：傳統的『。 '，以及數組方式，只不過用數組方式輸出時，方括號裡面要用引號括起來，如

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

給對象定義方法，

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

B:用字面量定義，只需要直接在物件的這個屬性上，寫function就行，這個function上面沒有函數名，他是個匿名函數，那怎麼呼叫這個方法呢，用物件的這個屬性名，要呼叫方法，同上就行

如：

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物件字面量的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=&#39;javascript:alert(literal["name"])&#39;"/>
    <input type="button" value="caller" onclick=&#39;javascript:literal.callLiteral()&#39;"/>
  </body>
</html>

上面是我整理給大家的，希望今後對大家有幫助。

有關js 即時監聽input中值變化（圖文教學）

有關js string()常用方法總結（圖文教學）

#php讀取本機json檔案有哪些方法

以上是Javascript物件字面量的理解（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：正規表示式(語法篇）下一篇：正規表示式(語法篇）

看更多