QQ交流群：110826636

文档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>

 


 练习代码文档下载

posted @ 2013-05-06 12:06  FourOne  阅读(332)  评论(0)  编辑  收藏  举报