javascript对象字面量
javascript对象字面量
在编程语言中,字面量是一种表示值的记法。例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外。以下也是JavaScript字面量的例子,如5、true、false和null,它们分别表示一个整数、两个布尔 值和一个空对象。
JavaScript还支持对象和数组字面量,允许使用一种简洁而可读的记法来创建数组和对象。考虑以下语句,其中创建了一个包含两个属性的对象(firstName和lastName):
![]() |
还可以使用一种等价的方法创建同样的对象:
![]() |
以上赋值语句的右边是一个对象字面量(object literal)。对象字面量是一个名值对列表,每个名值对之间用逗号分隔,并用一个大括号括起。各名值对表示对象的一个属性,名和值这两部分之间用一个冒号分隔。要创建一个数组,可以创建Array对象的一个实例:
![]() |
不过首选的方法是使用一个数组字面量(array literal),这是一个用逗号分隔的值列表,用中括号括起:
![]() |
前面的例子展示了对象和数组字面量中可以包含其他字面量。以下是一个更复杂的示例:
![]() |
赋给team变量的对象有3个属性:name、members和count。注意,''表示空串,[]是一个空数组。甚至count属性的值也是一个字面量,即函数字面量(function literal):
![]() |
函数字面量如下构造:前面是一个function关键字,后面是一个函数名(可选)和参数表。然后是函数体,包围在大括号中。
对象字面量: //只能添加静态属性和方法 var myObject={ propertyA: sha , propertyB: feng , methodA:function(){ alert(this.propertyA++this.propertyB); }, methodB:function(){} } myObject.methodA(); //利用prototype属性可以添加公有属性和方法 function myConstructor2(){}; //声明构造函数,可以使用对象字面量语法来向prototype属性中添加所有公有成员 myConstructor2.prototype={ propertyA: sha , propertyB: feng , methodA:function(){ alert(this.propertyA++this.propertyB); }, methodB:function(){} } var myconstrustor=new myConstructor2(); //声明对象 myconstrustor.methodA() //==================================================js脚本========================================================================== var jsHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声明 扩展 名 var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"]; //判断浏览器是否支持 XMLHttpRequest,如果支持,则是新式浏览器,可以直接创建 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //否则,只能循环 遍历 老式浏览器 异步对象名,一一尝试创建,知道创建成功为止 else if (window.ActiveXObject) { for (i = 0; i < xmlHttpObj.length; i++) { xmlHttp = new ActiveXObject(xmlHttpObj[i]); if (xmlHttp) { break; } } } //判断 异步对象 是否创建 成功,如果 成功,则返回异步对象,否则返回false return xmlHttp ? xmlHttp : false; }, /*2.0 发送Ajax请求*/ doAjax: function (method, url, data, isAyn, callback) { method = method.toLowerCase(); //2.1创建异步对象 var xhr = this.makeXHR(); //2.2设置请求参数(如果是get,则带url参数,如果不是,则不带) xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn); //2.3根据请求谓词(get/post),添加不同的请求头 if (method == "get") { xhr.setRequestHeader("If-Modified-Since", 0); } else { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //2.4设置回调函数 xhr.onreadystatechange = function () { callback(xhr); //当 异步对象 调用 回调函数时,为回调函数 传入 xhr 对象 }; //2.5发送(如果是post,则传参数,否则不传) xhr.send(method != "get" ? data : null); }, /*3.0 直接发送Post请求*/ doPost: function (url, data, isAyn, callback) { this.doAjax("post", url, data, isAyn, callback); }, /*4.0 直接发送Get请求*/ doGet: function (url, data, isAyn, callback) { this.doAjax("get", url, data, isAyn, callback); } }; //=============================Person.html========================================== <!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> <title></title> <style type="text/css"> #tbPerson { border:1px solid blue; margin:10px auto; width:500px; border-collapse:collapse; } #tbPerson th ,#tbPerson td { border:1px solid blue; } </style> <script type="text/javascript" src="../CommJs/Common.js"></script> <script type="text/javascript"> window.onload = function () { jsHelper.doGet("/Code/Person.ashx", "type=1", true, function (xhrObj) { if (xhrObj.readyState == 4 && xhrObj.status == 200) { var res = xhrObj.responseText; var resJson = JSON.parse(res); makeTable(resJson); } }); }; function makeTable(jsonArr) { for (var i = 0; i < jsonArr.length; i++) { //-- makeTr(jsonArr[i]); } } function makeTr(rowData) { var tbList = document.getElementById("tbPerson"); var newRow = tbList.insertRow(-1); newRow.insertCell(-1).innerHTML = rowData.BusinessEntityID; newRow.insertCell(-1).innerHTML = rowData.FirstName; newRow.insertCell(-1).innerHTML = rowData.MiddleName; newRow.insertCell(-1).innerHTML = rowData.LastName; newRow.insertCell(-1).innerHTML = rowData.ModifiedDate; newRow.insertCell(-1).innerHTML = " <a>删除</a><a>编辑</a>" } </script> </head> <body> <!--BusinessEntityID, PersonType, NameStyle, Title, FirstName, MiddleName, LastName, Suffix, EmailPromotion, AdditionalContactInfo, Demographics, rowguid, ModifiedDate--> <table id="tbPerson"> <th>BusinessEntityID</th> <th>FirstName</th> <th>MiddleName</th> <th>LastName</th> <th>ModifiedDate</th> <th >Operation</th> </table> </body> </html> 、、==========