JS面向对象的程序设计(一)
2011-10-22 22:32 三皮开发时 阅读(195) 评论(0) 编辑 收藏 举报<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>面向对象的程序设计</title>
</head>
<script type="text/javascript">
//创建对象
function createObject(){
var person = new Object();
person.name = "SanPi";
person.age = 23;
person.job = "CTP Engineer";
person.sayName = function(){
alert(this.name);
}
//上面是定义了对象person属性,这里是调用
person.sayName();
}
//工厂
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}
return o;
}
//工厂生产对象
//工厂模式有个缺点,没有解决对象识别的问题
function factoryCreate(){
var person1 = createPerson("SanPi", 23, "CTP Engineer");
var person2 = createPerson("ZhouBo", 23, "Engineer");
person1.sayName();
person2.sayName();
}
//Constructor
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
}
//构造函数模式
function constructorCreate(){
var person1 = new Person("SanPi", 23, "Comtop Engnieer");
var person2 = new Person("ZhoBo", 23, "Engnieer");
person1.sayName();
person2.sayName();
//识别对象类型 instanceof
alert(person1 instanceof Object);//true
alert(person1 instanceof Person);//true
//构造函数模式虽然好用，但是有个缺点,就是每个方法都要在每个实例上重新创建一遍
alert(person1.sayName == person2.sayName);//false
}
//构造函数模式的扩展
//在另一个对象的作用域中调用
function constructorCreateExtend(){
var o = new Object();
Person.call(o,"Kristen", 25, "Nurse");
o.sayName();
}
//重新写个构造器
function SolvePerson(name, age, job){
this.name = name;
this.age = age;
this.job = job;
//不同之处，将sayName的实现抽出全局变量中
this.sayName = sayName;
}
//全局sayName
function sayName(){
alert(this.name);
alert(this.age);
alert(this.job);
}
//修改之后的构造函数模式
function solveConstructor(){
var person1 = new SolvePerson("SanPi", 23, "Comtop Engnieer");
var person2 = new SolvePerson("Zhoubo", 23, "Engnieer");
person1.sayName();
person2.sayName();
//检测对象类型
alert(person1 instanceof SolvePerson); //true
alert(person1 instanceof Object); //true
//是否只创建一个
alert(person1.sayName == person2.sayName);//true
//【注】:如果对象需要定义很多方法,那么就要定义多个全局函数,这样话没有封装性
}
//原型模式
function PrototypeModule(){
}
PrototypeModule.prototype.name = "SanPi";
PrototypeModule.prototype.age = 23;
PrototypeModule.prototype.sayName = function(){
alert(this.name);
};
//原型模式创建
function prototypeCreate(){
var prototype1 = new PrototypeModule();
var prototype2 = new PrototypeModule();
prototype1.sayName(); //SanPi
prototype2.sayName(); //SanPi
//检测两对象的sayName是为同一实例产生
alert(prototype1.sayName == prototype2.sayName);//true
//提供hasOwnProperty方法
alert(prototype1.name);//SanPi
//之所以为false，是因为name来自原型而非自己
alert(prototype1.hasOwnProperty("name"));//false
prototype1.name = "Greg";
alert(prototype1.hasOwnProperty("name"));//true
//【注】:原型的缺点是：虽然省略了为构造函数传递初始化参数这一环节,但是所有实例在默认情况下都将取得相同的属性值
//在一定程度上带来不便
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>面向对象的程序设计</title>
</head>
<script type="text/javascript">
//创建对象
function createObject(){
var person = new Object();
person.name = "SanPi";
person.age = 23;
person.job = "CTP Engineer";
person.sayName = function(){
alert(this.name);
}
//上面是定义了对象person属性,这里是调用
person.sayName();
}
//工厂
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}
return o;
}
//工厂生产对象
//工厂模式有个缺点,没有解决对象识别的问题
function factoryCreate(){
var person1 = createPerson("SanPi", 23, "CTP Engineer");
var person2 = createPerson("ZhouBo", 23, "Engineer");
person1.sayName();
person2.sayName();
}
//Constructor
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
}
//构造函数模式
function constructorCreate(){
var person1 = new Person("SanPi", 23, "Comtop Engnieer");
var person2 = new Person("ZhoBo", 23, "Engnieer");
person1.sayName();
person2.sayName();
//识别对象类型 instanceof
alert(person1 instanceof Object);//true
alert(person1 instanceof Person);//true
//构造函数模式虽然好用，但是有个缺点,就是每个方法都要在每个实例上重新创建一遍
alert(person1.sayName == person2.sayName);//false
}
//构造函数模式的扩展
//在另一个对象的作用域中调用
function constructorCreateExtend(){
var o = new Object();
Person.call(o,"Kristen", 25, "Nurse");
o.sayName();
}
//重新写个构造器
function SolvePerson(name, age, job){
this.name = name;
this.age = age;
this.job = job;
//不同之处，将sayName的实现抽出全局变量中
this.sayName = sayName;
}
//全局sayName
function sayName(){
alert(this.name);
alert(this.age);
alert(this.job);
}
//修改之后的构造函数模式
function solveConstructor(){
var person1 = new SolvePerson("SanPi", 23, "Comtop Engnieer");
var person2 = new SolvePerson("Zhoubo", 23, "Engnieer");
person1.sayName();
person2.sayName();
//检测对象类型
alert(person1 instanceof SolvePerson); //true
alert(person1 instanceof Object); //true
//是否只创建一个
alert(person1.sayName == person2.sayName);//true
//【注】:如果对象需要定义很多方法,那么就要定义多个全局函数,这样话没有封装性
}
//原型模式
function PrototypeModule(){
}
PrototypeModule.prototype.name = "SanPi";
PrototypeModule.prototype.age = 23;
PrototypeModule.prototype.sayName = function(){
alert(this.name);
};
//原型模式创建
function prototypeCreate(){
var prototype1 = new PrototypeModule();
var prototype2 = new PrototypeModule();
prototype1.sayName(); //SanPi
prototype2.sayName(); //SanPi
//检测两对象的sayName是为同一实例产生
alert(prototype1.sayName == prototype2.sayName);//true
//提供hasOwnProperty方法
alert(prototype1.name);//SanPi
//之所以为false，是因为name来自原型而非自己
alert(prototype1.hasOwnProperty("name"));//false
prototype1.name = "Greg";
alert(prototype1.hasOwnProperty("name"));//true
//【注】:原型的缺点是：虽然省略了为构造函数传递初始化参数这一环节,但是所有实例在默认情况下都将取得相同的属性值
//在一定程度上带来不便
}
//组合使用构造函数模式和原型模式
//构造方法定义属性
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
//和原型一起使用，定义方法
//好处是不会每个对象不滥实例方法(sayName)
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
//测试组合使用构造函数模式和原型模式
function ConsProperty(){
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("SanPi", 23, "Software Engineer");
alert(person1.friends); //Shelby,Court
alert(person2.friends); //Shelby,Court
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
//组合构造函数模式和原型模式好处显而易见的
//每个对象都有着各自的属性，但共用同一个方法，而不是每个对象再去创建方法导致资源的浪费
}
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
//和原型一起使用，定义方法
//好处是不会每个对象不滥实例方法(sayName)
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
//测试组合使用构造函数模式和原型模式
function ConsProperty(){
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("SanPi", 23, "Software Engineer");
alert(person1.friends); //Shelby,Court
alert(person2.friends); //Shelby,Court
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
//组合构造函数模式和原型模式好处显而易见的
//每个对象都有着各自的属性，但共用同一个方法，而不是每个对象再去创建方法导致资源的浪费
}
</script>
<body>
<input type="button" value="创建对象" onclick="createObject()">
<input type="button" value="工厂模式" onclick="factoryCreate()">
<input type="button" value="构造函数" onclick="constructorCreate()">
<input type="button" value="构造函数扩展" onclick="constructorCreateExtend()">
<input type="button" value="解决构造函数缺点" onclick="solveConstructor()">
<input type="button" value="原型" onclick="prototypeCreate()">
</body>
</html>
//对象另一角度应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>集合对象测试</title>
</head>
<script>
var strObj = {
"name" : "SanPi",
"age" : "23",
"job" : "Engineer",
sayName : function(){
alert(this.job);
}
};
var intObj = {
1 : "first",
2 : "second",
3 : "third",
sayNum : function(){
alert(intObj[1] + intObj[2] + intObj[3]);
}
};
function objectFunction(){
alert(strObj["name"]);//SanPi
alert(intObj[1]);//first
strObj.sayName();//Engineer
intObj.sayNum();//firstsecondthird
}
</script>
<body>
<input type="button" value="测试集合的应用" onclick="objectFunction()">
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>集合对象测试</title>
</head>
<script>
var strObj = {
"name" : "SanPi",
"age" : "23",
"job" : "Engineer",
sayName : function(){
alert(this.job);
}
};
var intObj = {
1 : "first",
2 : "second",
3 : "third",
sayNum : function(){
alert(intObj[1] + intObj[2] + intObj[3]);
}
};
function objectFunction(){
alert(strObj["name"]);//SanPi
alert(intObj[1]);//first
strObj.sayName();//Engineer
intObj.sayNum();//firstsecondthird
}
</script>
<body>
<input type="button" value="测试集合的应用" onclick="objectFunction()">
</body>
</html>
