体验 Javascript 面向对象编程的魅力,制作一个小的 Demo
2011-04-25 11:52 音乐让我说 阅读(720) 评论(0) 编辑 收藏 举报直接帖代码:
<!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>Javascript 面向对象编程</title> <script language="javascript" type="text/javascript" src="js/javascriptoop.js"></script> </head> <body> <input type="button" value="得到一个Javascript对象所有属性名称" onclick="ForeachAttrFromObject();"/><br /><br /> <input type="button" value="删除一个Javascript对象的某个属性" onclick="RemoveAttrFromObject();"/><br /><br /> <input type="button" value="判断一个Javascript对象是否存在某个属性" onclick="JudgeExistsAttrInObject();"/><br /><br /> <input type="button" value="得到“构造函数”的名称" onclick="GetConstructor();"/><br /><br /> <input type="button" value="创建并操作数组" onclick="CreateAndOperateArray();"/><br /><br /> <input type="button" value="调用一个带默认值的函数" onclick="TestPrintObject();"/><br /><br /> <input type="button" value="显示对象" onclick="ShowObject();"/><br /><br /> <input type="button" value="创建一个Student对象" onclick="CreateASimepleObject();"/><br /><br /> <input type="button" value="利用prototype 原型对象扩展" onclick="ExtendObjWithPrototype();"/><br /><br /> <input type="button" value="练习创建内部函数(Function)" onclick="CreateFunction();"/><br /><br /> </body> </html>
javascriptoop.js
function ForeachAttrFromObject() { var user = { name: "张三", age: 18, sex: true }; var str = ""; for (var key in user) { str += (key + "\n"); } alert(str); } function RemoveAttrFromObject() { var user = { name: "张三", age: 18, sex: true }; delete user.sex; //或者:delete user["sex"] var str = ""; for (var key in user) { str += (key + "\n"); } alert(str); } function JudgeExistsAttrInObject() { var user = { name: "张三", age: 18, sex: true }; alert(" user 对象是否存在 birthday 属性:" + ("birthday" in user) + "\n"); alert(" user 对象是否存在 age 属性:" + ("age" in user) + "\n"); } function GetConstructor() { var user = { name: "张三", age: 18, sex: true }; alert(user.constructor); // function Object(){ [native code] } var student = new Array(); alert(typeof (student.constructor)); // Function var nowDate = new Date(); alert(nowDate.constructor); // function Date(){ [native code] } alert(nowDate.constructor == "Date"); // false alert(nowDate.constructor == Date); // true } function CreateAndOperateArray() { var userGroup = []; userGroup = [18, "Good", [3, 4], ["Hello", "World"], { groupName: "超越", groupAge: 18, isWin: true}]; alert(userGroup[0]); // 18 alert(userGroup[2][1]); // 4 alert(userGroup[3][0]); //hello alert(userGroup[4].groupName); //超越 alert(userGroup[100] == undefined); //true var teacherArray = new Array(); teacherArray = [null, , 5]; alert(teacherArray.length); //3 alert(teacherArray[0]); //null alert(teacherArray[1]); //undefined alert(teacherArray[2]); //5 } function PrintObject(isSuccess, user) { if (!isSuccess) { alert("参数“isSuccess”必须提供"); return false; } var defaultUser = { name: "匿名", age: 18, sex: true }; user = user || defaultUser; // 等同于: user = user == null ? defaultUser : user alert("是否成功:" + isSuccess + "\n 姓名:" + user.name + "\n年龄:" + user.age + "\n性别:" + (user.sex ? "男" : "女")); } function TestPrintObject() { PrintObject(); PrintObject(true); // // 匿名 18 男 PrintObject(true, { name: "韩梅梅", age: 19, sex: false }); // 韩梅梅 19 女 PrintObject(true, { name: "李雷", age: 20, birthday: new Date() }); // 李雷 20 女 PrintObject(true, { name: "吉姆" }); // 吉姆 undefined 女 } function ShowObject() { var user = { name: "张三", age: 18 }; user.show = function() { alert(this.name + ":" + this.age); } user.show(); user.name = "李四"; user.show(); } function Student() { this.sex = "male"; this.age = 18; this.showMessage = function() { alert("我的性别:" + this.sex + ",我的年龄:" + this.age); }; } /* /* 其实 上面的写法(function Student { ... }加上 var stu = new Student(); )等价于 /* var stu = { sex: "male", age: 18, showMessage: function() { alert("我的性别:" + this.sex + ",我的年龄:" + this.age); } }; */ function CreateASimepleObject() { var stu = new Student(); // alert(typeof(stu)); //object alert(stu["age"]); // 或者:alert(eval("stu." + "age"));即可拼接字符串。 结果为:18 stu.showMessage(); var students = new Array(); students.push(stu); // 或者: students["push"](stu); alert("数组的长度为:" + students.length); /* 或者 students["length"] */ } String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } function ExtendObjWithPrototype() { var myName = " 张 三 "; alert("长度:" + myName.length); myName = myName.trim(); alert("trim 后的长度:" + myName.length); } function CreateFunction() { var add = new Function("a", "b", "c", "return a + b + c"); // 等价于 new Function("a,b","c", "return a + b + c") 等价于 new Function("a","b,c", "return a + b + c") var result = add(1, 1, 1); alert(result); }
谢谢浏览!
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。