• 文档06_JavaScript_面相对象


    Javascript面向对象

    由于javascript是弱的面向对象,所以在面向对象方面不是很彻底,它的面向对象是基于原型的。

     

    示例01

    View Code
    <!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=gb2312" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    Number.prototype.add=function(val1,val2){ return val1+val2};
    
    Number.prototype.reduce=function(val1,val2){ return val1-val2};
    
    var num=new Number();
    
    var add=num.add(3,9);
    
    var reduce=num.reduce(9,3); 
    
    var num2=new Number();
    
    var add2=num2.add(3,6);
    
    var reduce2=num2.reduce(9,6);
    
    document.write("Number.prototype.add=function(val1,val2){ return val1+val2};<br/>"+
    
    "Number.prototype.reduce=function(val1,val2){ return val1-val2};<br/>"+
    
    "var num=new Number();<br/>"+
    
    "var add=num.add(3,9);<br/>"+
    
    "var reduce=num.reduce(9,3);<br/>"+
    
    "var num2=new Number();<br/>"+
    
    "var add2=num2.add(3,6);<br/>"+
    
    "var reduce2=num2.reduce(9,6);<br/>");
    
    document.write("result:<br/>")
    
    document.write("add:"+add);
    
    document.write("<br/>");
    
    document.write("reduce:"+reduce);
    
    document.write("<br/>result:<br/>")
    
    document.write("add2:"+add2);
    
    document.write("<br/>");
    
    document.write("reduce2:"+reduce2);
    
    </script>
    
    </head>
    
     
    
    <body>
    
    </body>
    
    </html>

     

    以上示例影响对象本身

    示例02

    View Code
    <!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=gb2312" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    var num=new Number();
    
    num.add=function(val1,val2){return val1+val2};
    
    var add=num.add(5,9);
    
    document.write("add:"+add);
    
    var num2=new Number();
    
    var add2=num2.add(1,9);//没有此函数
    
    document.write("<br/>add2:"+add2);//不执行
    
    </script>
    
    </head>
    
     
    
    <body>
    
    </body>
    
    </html>
    
    不影响对象本身

     

    示例03

    自定义对象,运用函数

    View Code
    <!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=gb2312" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    //简单自定义对象
    
    var Book=function(strTitle){
    
    this.title=strTitle;
    
    this.getTitle=function()
    
    { return this.title+",我卖10块钱";}
    
    this.setTitle=function(str_Title)
    
    { this.title=str_Title; }
    
    }
    
    var book=new Book("我是书");
    
    document.write(book.title);
    
    document.write("<br/>");
    
    document.write(book.getTitle());
    
    document.write("<br/>");
    
    book.setTitle("我是字典");
    
    document.write(book.title);
    
    document.write("<br/>");
    
    document.write(book.getTitle());
    
     
    
    </script>
    
    </head>
    
     
    
    <body>
    
    </body>
    
    </html>

    示例04

    使用set 和 get

    View Code
    <!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=gb2312" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    //不支持IE
    
    function Book(){
    
     
    
    }
    
     
    
    function printValue()
    
    { document.write(this.Title);}
    
    var b=Book.prototype;
    
    b.__defineGetter__('title',function(){return this.MyTitle;});
    
    b.__defineGetter__('title',function(t){ this.MyTitle=t;});
    
    b.printTitle=printValue;
    
     
    
    var book=new Book;
    
    document.write(book.Title);//必须大写
    
    document.write("<br/>");
    
    book.Title="one book";
    
    document.write(book.Title);
    
    document.write("<br/>");
    
    book.printTitle();
    
    </script>
    
    </head>
    
     
    
    <body>
    
    </body>
    
    </html>

    示例05
    一次性对象

    View Code
    <!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=gb2312" />
    
    <title>无标题文档</title>
    
    <script type="text/javascript">
    
    //一次性对象
    
     
    
    //数组形式创建
    
    var Book={
    
    title:"",
    
    num:"",
    
    print:function(){ return this.title;}
    
    }
    
    Book.title="good";
    
    Book.num="one";
    
    document.write(Book.title);
    
    document.write("<br/>"+Book.num);
    
    document.write("<br/>"+Book.print());
    
     
    
    //从Object创建
    
    var book2=new Object();
    
    book2.title="我的书";
    
    book2.write=function(){return this.title; }
    
    document.write("<br/>");
    
    document.write(book2.title);
    
    document.write("<br/>"+book2.write());
    
     
    
    //从函数对象方式创建
    
    var book3=new Function()
    
    {
    
    this.title="";
    
    this.prototype.MyWrite=function(){ return this.title+"123";};
    
    }
    
    book3.title="第三种书";
    
    document.write("<br/>");
    
    document.write(book3.title);
    
    document.write("<br/>"+book3.MyWrite());
    
     
    
    </script>
    
    </head>
    
     
    
    <body>
    
    </body>
    
    </html>

     练习代码文档下载

  • 相关阅读:
    局域网无法访问vmware虚拟机WEB服务器解决办法
    zipimport.ZipImportError: can't decompress data; zlib not available 解决办法
    如何在win下使用linux命令
    《redisphp中文参考手册》php版
    Python关键字参数与非关键字参数(可变参数)详解
    Python与 PHP使用递归建立多层目录函数
    第一场个人图论专题
    poj_2762,弱连通
    word宏的问题
    fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
  • 原文地址:https://www.cnblogs.com/RainbowInTheSky/p/3059265.html
Copyright © 2020-2023  润新知