体验 Javascript 面向对象编程的魅力，制作一个小的 Demo

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30892889

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量112

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Music/archive/2011/04/25/learn-to-javascript-oop-simple-demo.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>Javascript 面向对象编程</title>
    <script language="javascript" type="text/javascript" src="js/javascriptoop.js"></script>
</head>
<body>
<input type="button" value="得到一个Javascript对象所有属性名称" οnclick="ForeachAttrFromObject();"/><br /><br />
<input type="button" value="删除一个Javascript对象的某个属性" οnclick="RemoveAttrFromObject();"/><br /><br />
<input type="button" value="判断一个Javascript对象是否存在某个属性" οnclick="JudgeExistsAttrInObject();"/><br /><br />
<input type="button" value="得到“构造函数”的名称" οnclick="GetConstructor();"/><br /><br />
<input type="button" value="创建并操作数组" οnclick="CreateAndOperateArray();"/><br /><br />
<input type="button" value="调用一个带默认值的函数" οnclick="TestPrintObject();"/><br /><br />
<input type="button" value="显示对象" οnclick="ShowObject();"/><br /><br />
<input type="button" value="创建一个Student对象" οnclick="CreateASimepleObject();"/><br /><br />
<input type="button" value="利用prototype 原型对象扩展" οnclick="ExtendObjWithPrototype();"/><br /><br />
<input type="button" value="练习创建内部函数（Function）" οnclick="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);
}

谢谢浏览！

转载于:https://www.cnblogs.com/Music/archive/2011/04/25/learn-to-javascript-oop-simple-demo.html

weixin_30892889

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
体验 Javascript 面向对象编程的魅力，制作一个小的 Demo

直接帖代码：<!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" ><h...
复制链接

扫一扫