js面向对象经典实例
2009-12-21 23:59
609 查看
完美级:
<!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>无标题页</title>
<script>
function New(aClass,aParams)//通用创建函数
{function new_()//定义临时的中转函数壳
{aClass.Create.apply(this,aParams);//调用原型中定义的构造函数，中转构造逻辑及构造参数
};
new_.prototype=aClass;
return new new_();
};
var Person=//定义的类
{
Create:function(name,age)
{this.name=name;
this.age=age;
},
SayHello:function()
{alert("Hello,I'm "+this.name);
},
HowOld:function()
{alert(this.name+" is "+this.age+" years old.");
}
};
var bill=New(Person,["Bill Gates",53]);//调用通用函数创建对象，并以数组形式传递构造参数
bill.SayHello();
bill.HowOld();
alert(bill.constructor==Object);
</script>
</head>
<body>
</body>
</html>
原型链级（缺点：继承父类的prototype原型方法时，子类的prototype需要指向父类的一个实例化对象用于传递父类的方法，此操作在产生传递方面有不足）
function person(name){this.name=name;};
person.prototype.sayHello=function(){alert("Hello,I'm "+this.name);};
function employee(name,money){person.call(name);this.money=money;};
employee.prototype=new person();
employee.prototype.showMoney=function(){alert(this.name+this.money);};
em=new employee("aa",11);
em.showMoney();
em.sayHello();
pp=new person("bb");
pp.sayHello();
//alert(pp.sayHello==em.sayHello);
String.prototype.toString()=function(){};
var aaa="bb";
aaa.toString();
String.prototype.isDate=function(){var reg=/^[0-9]*$/;return reg.test(this);};
alert("11231".isDate());
alert("2005-11-11".isDate());
function Person(name){this.name;};
Person.prototype.company="MS";
Person.prototype.SayHello = function() //原型的方法
{ alert("Hello, I'm " + this.name + " of " + this.company); };
var BillGates = new Person("Bill Gates");
BillGates.SayHello(); //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates
var SteveJobs = new Person("Steve Jobs");
SteveJobs.company = "Apple"; //设置自己的company属性，掩盖了原型的company属性
SteveJobs.SayHello = function() //实现了自己的SayHello方法，掩盖了原型的SayHello方法
{ alert("Hi, " + this.name + " like " + this.company + ", ha ha ha "); };
SteveJobs.SayHello(); //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha BillGates.
闭包级：（完全类似C#的类的定义，但每次实例化对象都会分配内存，而且变量的引用方面会造成浏览器垃圾的回收工作相当困难）
function Person(firstName,lastName,age)
{var _firstName=firstName;
var _lastName=lastName;
this.age=age;
this.getName=function()
{return (firstName+" "+lastName);
}
this.sayHello=function()
{alert("Hello ,I'm "+firstName+" "+lastName);};
}
var bill=new Person("Bill","Gates",53);
alert(bill.getName());
bill.sayHello();
alert(bill.firstName);
调试代码片段:
<!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>无标题页</title>
<script language="javascript" type="text/javascript">
// var life={};
// for(life.age=1;life.age<=3;life.age++)
// {switch(life.age)
// {case 1:life.body="细胞";
// life.say=function(){alert(this.age+this.body)};
// break;
// case 2:life.tail="尾巴";
// life.gill="腮";life.body="蝌蚪";
// life.say=function(){alert(this.age+this.body+"-"+this.tail+","+this.gill)};break;
// case 3:delete life.tail;delete life.gill;
// function(){alert(this.age+this.body);}
//
// break;
//
// }
// life.say();
// }
//function myfunc(){alert("hello");};alert(typeof(myfunc));
//var myfunc=function(){alert('hello');};myfunc();myfunc=function(){alert("yeah");};myfunc();
//function my(){alert("hellp");};my();
//function sing()
//{with(arguments.callee)
//alert(author+":"+poem);
//};
//sing.author="李白";
//sing.poem="汉家秦地月";
//sing();
//sing.author="李哉";
//sing.poem="日出汉家天";
//sing();
//var anObject={};
//anObject.property="a property";
//anObject.methoda=function(){alert("a method");};
//alert(anObject.property);
//alert(anObject["property"]);
//anObject.methoda();
////anOjbect["methoda"]();
//for(var s in anObject)
//alert(s+" is a "+typeof(anObject[s]));
//var aFunction=function(){};
//aFunction.ap="is a property";
//aFunction.am=function(){alert("It is a am");};
//alert(aFunction["ap"]);
//alert(aFunction.ap);
//aFunction["am"]();
//aFunction.am();
//for(var s in aFunction)
//alert(s+" is a "+typeof(aFunction[s]));
//function whoAmI()
//{
//alert("I'm "+this.name+" of "+typeof(this));
//}
//whoAmI();
//var bill={name:"BillGates"};
//bill.whoAmI=whoAmI;
//bill.whoAmI();
//var steve={name:"Steve Jobs"};
//steve.whoAmI=whoAmI;
//steve.whoAmI();
//whoAmI();
//whoAmI.call(bill);
//whoAmI.call(steve);
//bill.whoAmI.call(steve);
//whoAmI.whoAmI=whoAmI;
//whoAmI.name="whoAmI";
//whoAmI.whoAmI();
//({name:"nobody",whoAmI:whoAmI}).whoAmI();
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
//function Class1()
//{
// this.name = "class1";
// this.showNam = function()
// {
// alert(this.name);
// }
//}
//function Class2()
//{
// this.name = "class2";
//}
//var c1 = new Class1();
//var c2 = new Class2();
//c1.showNam.call(c2);
function Class1()
{
this.showTxt = function(txt)
{
alert(txt);
}
}
function Class2()
{
Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");
</script>
</head>
<body>
</body>
</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>无标题页</title>
<script >
function sayhello()
{alert("Hello,I'm "+this.name);
}
function person(name)
{this.name=name;
//this.sayHello=function(){alert("Hello,I'm not "+this.name);};
//this.sayHello=sayhello;
}
person.prototype.staticalert=function(){alert("It's a static method?");};
person.prototype.sayHello=function(){alert("Hello,I'm "+this.name);};
function emp(name,sal)
{person.call(this,name);
this.sal=sal;
this.showMoney=function(){alert(this.name+" $"+this.sal);}
}
// var eee=new emp("Xiaoqiang",500);
//eee.showMoney();
// eee["showMoney"]();
// eee.sayHello();
//alert(eee.constructor==emp);
//alert(eee.constructor==person);
//alert(person.constructor);
var eeee=new person("Xiaoqiang");
eeee.sayHello();
//eeee.staticalert();
//alert(eee.sayHello==eeee.sayHello);
// person.prototype.staticalert();
//var eeeee=new person("Daqiang");
// alert(eeee.sayHello==eeeee.sayHello);
// alert(eeee.staticalert==eeeee.staticalert);
</script>
</head>
<body>
</body>
</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>无标题页</title>
<script>
function New(aClass,aParams)//通用创建函数
{function new_()//定义临时的中转函数壳
{aClass.Create.apply(this,aParams);//调用原型中定义的构造函数，中转构造逻辑及构造参数
};
new_.prototype=aClass;
return new new_();
};
var Person=//定义的类
{
Create:function(name,age)
{this.name=name;
this.age=age;
},
SayHello:function()
{alert("Hello,I'm "+this.name);
},
HowOld:function()
{alert(this.name+" is "+this.age+" years old.");
}
};
var bill=New(Person,["Bill Gates",53]);//调用通用函数创建对象，并以数组形式传递构造参数
bill.SayHello();
bill.HowOld();
alert(bill.constructor==Object);
</script>
</head>
<body>
</body>
</html>
原型链级（缺点：继承父类的prototype原型方法时，子类的prototype需要指向父类的一个实例化对象用于传递父类的方法，此操作在产生传递方面有不足）
function person(name){this.name=name;};
person.prototype.sayHello=function(){alert("Hello,I'm "+this.name);};
function employee(name,money){person.call(name);this.money=money;};
employee.prototype=new person();
employee.prototype.showMoney=function(){alert(this.name+this.money);};
em=new employee("aa",11);
em.showMoney();
em.sayHello();
pp=new person("bb");
pp.sayHello();
//alert(pp.sayHello==em.sayHello);
String.prototype.toString()=function(){};
var aaa="bb";
aaa.toString();
String.prototype.isDate=function(){var reg=/^[0-9]*$/;return reg.test(this);};
alert("11231".isDate());
alert("2005-11-11".isDate());
function Person(name){this.name;};
Person.prototype.company="MS";
Person.prototype.SayHello = function() //原型的方法
{ alert("Hello, I'm " + this.name + " of " + this.company); };
var BillGates = new Person("Bill Gates");
BillGates.SayHello(); //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates
var SteveJobs = new Person("Steve Jobs");
SteveJobs.company = "Apple"; //设置自己的company属性，掩盖了原型的company属性
SteveJobs.SayHello = function() //实现了自己的SayHello方法，掩盖了原型的SayHello方法
{ alert("Hi, " + this.name + " like " + this.company + ", ha ha ha "); };
SteveJobs.SayHello(); //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha BillGates.
闭包级：（完全类似C#的类的定义，但每次实例化对象都会分配内存，而且变量的引用方面会造成浏览器垃圾的回收工作相当困难）
function Person(firstName,lastName,age)
{var _firstName=firstName;
var _lastName=lastName;
this.age=age;
this.getName=function()
{return (firstName+" "+lastName);
}
this.sayHello=function()
{alert("Hello ,I'm "+firstName+" "+lastName);};
}
var bill=new Person("Bill","Gates",53);
alert(bill.getName());
bill.sayHello();
alert(bill.firstName);
调试代码片段:
<!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>无标题页</title>
<script language="javascript" type="text/javascript">
// var life={};
// for(life.age=1;life.age<=3;life.age++)
// {switch(life.age)
// {case 1:life.body="细胞";
// life.say=function(){alert(this.age+this.body)};
// break;
// case 2:life.tail="尾巴";
// life.gill="腮";life.body="蝌蚪";
// life.say=function(){alert(this.age+this.body+"-"+this.tail+","+this.gill)};break;
// case 3:delete life.tail;delete life.gill;
// function(){alert(this.age+this.body);}
//
// break;
//
// }
// life.say();
// }
//function myfunc(){alert("hello");};alert(typeof(myfunc));
//var myfunc=function(){alert('hello');};myfunc();myfunc=function(){alert("yeah");};myfunc();
//function my(){alert("hellp");};my();
//function sing()
//{with(arguments.callee)
//alert(author+":"+poem);
//};
//sing.author="李白";
//sing.poem="汉家秦地月";
//sing();
//sing.author="李哉";
//sing.poem="日出汉家天";
//sing();
//var anObject={};
//anObject.property="a property";
//anObject.methoda=function(){alert("a method");};
//alert(anObject.property);
//alert(anObject["property"]);
//anObject.methoda();
////anOjbect["methoda"]();
//for(var s in anObject)
//alert(s+" is a "+typeof(anObject[s]));
//var aFunction=function(){};
//aFunction.ap="is a property";
//aFunction.am=function(){alert("It is a am");};
//alert(aFunction["ap"]);
//alert(aFunction.ap);
//aFunction["am"]();
//aFunction.am();
//for(var s in aFunction)
//alert(s+" is a "+typeof(aFunction[s]));
//function whoAmI()
//{
//alert("I'm "+this.name+" of "+typeof(this));
//}
//whoAmI();
//var bill={name:"BillGates"};
//bill.whoAmI=whoAmI;
//bill.whoAmI();
//var steve={name:"Steve Jobs"};
//steve.whoAmI=whoAmI;
//steve.whoAmI();
//whoAmI();
//whoAmI.call(bill);
//whoAmI.call(steve);
//bill.whoAmI.call(steve);
//whoAmI.whoAmI=whoAmI;
//whoAmI.name="whoAmI";
//whoAmI.whoAmI();
//({name:"nobody",whoAmI:whoAmI}).whoAmI();
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
//function Class1()
//{
// this.name = "class1";
// this.showNam = function()
// {
// alert(this.name);
// }
//}
//function Class2()
//{
// this.name = "class2";
//}
//var c1 = new Class1();
//var c2 = new Class2();
//c1.showNam.call(c2);
function Class1()
{
this.showTxt = function(txt)
{
alert(txt);
}
}
function Class2()
{
Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");
</script>
</head>
<body>
</body>
</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>无标题页</title>
<script >
function sayhello()
{alert("Hello,I'm "+this.name);
}
function person(name)
{this.name=name;
//this.sayHello=function(){alert("Hello,I'm not "+this.name);};
//this.sayHello=sayhello;
}
person.prototype.staticalert=function(){alert("It's a static method?");};
person.prototype.sayHello=function(){alert("Hello,I'm "+this.name);};
function emp(name,sal)
{person.call(this,name);
this.sal=sal;
this.showMoney=function(){alert(this.name+" $"+this.sal);}
}
// var eee=new emp("Xiaoqiang",500);
//eee.showMoney();
// eee["showMoney"]();
// eee.sayHello();
//alert(eee.constructor==emp);
//alert(eee.constructor==person);
//alert(person.constructor);
var eeee=new person("Xiaoqiang");
eeee.sayHello();
//eeee.staticalert();
//alert(eee.sayHello==eeee.sayHello);
// person.prototype.staticalert();
//var eeeee=new person("Daqiang");
// alert(eeee.sayHello==eeeee.sayHello);
// alert(eeee.staticalert==eeeee.staticalert);
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS 面向对象实例 prototype
- 每日一个js实例5--通过面向对象实现运动
- 一个经典实例理解继承与多态原理与优点（附源码）---面向对象继承和多态性理解得不够深刻的同学请进
- js面向对象实例(实现简易版拖拽)
- 原生js面向对象开发打砖块游戏，用代码怀念儿时经典
- JS面向对象实例、高级
- 每日一个js实例7--通过面向对象实现选项卡
- js面向对象原型属性和实例属性
- JS面向对象经典题目(一)
- JS——面向对象实例
- javascript 面向对象实例
- js 声明数组和向数组中添加对象变量的简单实例
- 设计模式C++学习笔记之二十（完结篇 & 面向对象原则）设计模式C++实例下载
- 使用console.dir 快速概览Node.JS中对象实例的属性和方法
- 面向对象的程序设计1 理解对象—— JS学习笔记2015-7-4(第75天)
- 学习javascript面向对象 实例讲解面向对象选项卡
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- js 面向对象学习5 本地对象与内置对象
- React首部经典图书推荐：全程经典实例，360度剖析React.js
- js面向对象初步认识