您的位置：首页 > Web前端 > JavaScript

javascript创建自定义对象和prototype

2013-10-15 21:57 337 查看 
<!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=utf-8" />
<title>javascript自定义对象</title>
<script type="text/javascript" language="javascript" src="my.js"></script>
</head>

<body>
<script type="text/javascript" language="javascript">
//写构造函数-----------------------------------------

//1.写构造函数
function Person(){

}
//2创建对象
var p=new Person();
//3绑定属性
p.name="张三";
p.age=23;

//4绑定函数
p.say=sayHi;

//5调用
p.say();

document.write(p+"<br/>");
document.write( p.name+"<br/>");

function sayHi(){
document.write( "hello hi <br/>" );
}
</script>
<script type="text/javascript" language="javascript">
//写构造函数的另一种形式-----------------------------------------
//1创建构造函数
function Shape(x,y){
this.x=x;//this 代表当前对象
this.y=y;
this.say=function(){
document.write("这个是一个函数<br/>");
}
}

//创建对象
var shape=new Shape(12,34);

//调用
document.write( shape +"<br/>");
document.write(shape.x+"<br/>");
shape.say();

//动态修改属性
delete shape.x;//删除对象的x属性
shape.say=null;//直接删除该方法
shape.say=function (){
document.write("重写前面的方法！<br/>");
}
document.write( shape.x+"<br/>");//undefined  没有找到该属性
shape.say();//这里会报错

</script>
<script type="text/javascript" language="javascript">
//Object 形式的-----------------------------------------
document.write( Math.constructor +"<br/>");
var p=new Object();//这里的new关键字可以不要var p= Object();
p.name="jack";
p.gender="male";
p.eat=function(){
document.write(this.name+"<br/>"+"eat..............");
}
document.write(p.name+" : " +p.gender+"<br/>");
p.eat();

</script>
<script type="text/javascript" language="javascript">
//字面值形式-------------------------------------
var person={
name:"张三",
age:14,
sleep:function(){
document.write(this.name+"sleep。。。。。。。。。。。。<br/>");
},
};

document.write( person.name+"：这个是一个名字"+person.age+"<br/>");
person.sleep();

</script>
</body>
</html>
<!-----------
javascript中内置的对象有限,不能满足所有项目开发的要求,所以javascript就提供了开发者自定义对象的功能

创建自定义对象的几种方式:
1.构造函数
1.1写构造函数
1.2创建对象
1.3属性绑定
1.4函数绑定

缺点:没创建一个对象都要写一个构造函数

2.Object
所有的对象都是Object
2.1直接使用javascript语言中默认的Object构造函数创建对象
2.2绑定属性
2.3绑定函数

特点:new关键字可以不要

3.字面值
无需使用任何的构造函数，直接使用{}代表一个对象。在{}中可以指定属性和函数

-------->


<!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=utf-8" />
<title>javascript中的方法prototype和call</title>
</head>

<body>
<script type="text/javascript" language="javascript">
//prototype ----------------------------------------
function Person(name){
//对象方法
this.name=name;
this.Introduce=function(){
alert("my name is "+this.name);
}
}
//类方法
Person.Run=function(){
alert(" i can run");
}
Person.prototype.IntrodeceChinese=function(){
alert("我的名字是："+this.name);
}

//测试

var p=new Person("张三");
p.Introduce();
Person.Run();
p.IntrodeceChinese();

</script>
<script type="text/javascript" language="javascript">
//javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。

//可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

function baseClass(){
this.showMsg=function(){
alert("baseClass：：showMsg");
}
}

function extendsClass(){
}

extendsClass.prototype=new baseClass();
var instance=new extendsClass();

instance.showMsg();
</script>
<script type="text/javascript" language="javascript">
function baseClass(){
this.showMsg=function(){
alert("baseClass：：showMsg");
}
}

function extendsClass(){
//假如本身也有一个showMsg方法，函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
this.showMsg=function(){
alert("extendsClass:showMsg");
}
}

extendsClass.prototype=new baseClass();
var instance=new extendsClass();

instance.showMsg();
</script>
<script type="text/javascript" language="javascript">
//如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办？
function baseClass(){
this.showMsg=function(){
alert("baseClass：：showMsg");
}
}

function extendsClass(){
this.showMsg=function(){
alert("extendsClass:showMsg");
}
}
extendsClass.prototype=new baseClass();
var instance=new baseClass();

var baseInstance=new baseClass();
baseInstance.showMsg.call( instance );//显示baseClass：：showMsg

</script>
</body>
</html>

这个是引用的:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 的这位老大的,只是自己测试了下
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航