JS面向对象
珙桐340 次
<html>
<head>
</head>
<body>
<button onclick="person1.introduce()">person1</button>
<button onclick="person2.introduce()">person2</button>
<button onclick="person3.introduce()">person3</button>
<button onclick="person4.introduce()">person4</button>
<button onclick="checkFunc()">checkFunc</button>
<button onclick="checkFuncByProto()">checkFuncByProto</button><br/>
<button onclick="testCnstrct()">testCnstrct</button>
<button onclick="testCnstrctpttp()">testCnstrctpttp</button>
<button onclick="testDbproto()">testDbproto</button>
<button onclick="JSONFontI()">JSONFontI</button>
<button onclick="JSONFontII()">JSONFontII</button><br/>
<button onclick="testFactory()">testFactory</button>
<button onclick="testAbstractFactory()">testAbstractFactory</button>
<script>
var name = "1111111111"
/********************************************/
/* 第一种构建对象的办法*/
/* ***推断***,{}即为对象.*/
/********************************************/
var person1 = {};
person1.name = "junzi";
person1.age = 23;
person1.introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
/********************************************/
/* 第二种构建对象的办法,类似JSON格式":"*/
/********************************************/
var person2 = {
name: "junzi",
age: 23,
introduce: function () {
alert("My name is " + this.name + ".I'm " + this.age);
}
};
/********************************************/
/* 第三种构建对象的办法,与Java中有些相似*/
/********************************************/
var Person = function () {
this.name = "junzi";
this.age = 23;
this.introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person3 = new Person();
/********************************************/
/* 第四种构建对象,与第三种类似,只不过参数通过new 构造传入 */
/********************************************/
var Person = function (name, age) {
this.name = name;
this.age = age;
this.introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person4 = new Person("junzi",23);
/********************************************/
/* 看看实例之间的关系@@ */
/********************************************/
var person5 = new Person("chaokong",23);
function checkFunc(){
alert(person4.introduce==person5.introduce);//结果是false,说明introduce有两个实现分别在4和5中
alert(person4.age==person5.age);// 结果是true,说明基本类型的话之比较数值是否相同
alert(person4.name==person5.name);// 如果两个名字值不同,则为false,***推测***在javascript中的变量比较的是值是否相同,而方法被视为对象.于是下边...
}
/********************************************/
/* 通过prototype的方式 */
/********************************************/
var PersonI = function(name,age){
this.name = name;
this.age = age;
}
/*
* 在JavaScript中，prototype对象是实现面向对象的一个重要机制。
* 每个函数就是一个对象（Function），函数对象都有一个子对象,即prototype对象，类是以函数的形式来定义的。
* prototype表示该函数的原型，也表示一个类的成员的集合。
* 在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。
* 1、该对象被类所引用，只有函数对象才可引用；
* 2、在new实例化后，其成员被实例化，实例对象方可调用。
* 同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。
*/
PersonI.prototype.introduce = function(){
alert("My name is " + this.name + ".I'm " + this.age);
}
var person6 = new PersonI("junzi",23);
var person7 = new PersonI("chaokong",23);
function checkFuncByProto(){
alert(person6.introduce==person7.introduce);//
alert(person6.age==person7.age);
alert(person6.name==person7.name);
}
/********************************************/
/* 研究研究prototype*/
/********************************************/
/*
* JavaScript中创建一个对象分以下几步:
* <1> var p={}; 也就是说，初始化一个对象p。
* <2> p.__proto__=Person.prototype;
* <3> Person.call(p);也就是说构造p，也可以称之为初始化p。
*/
var PersonII = function () { };
//通过prototype创建一个方法
PersonII.prototype.sayHello = function(){
alert("hello");
}
var p = new PersonII();
function testCnstrct(){
alert(p.__proto__ === PersonII.prototype);
}
/*
* 首先var p=new PersonII()；可以得出p.__proto__=PersonII.prototype。
* 那么当我们调用p.sayHello()时，首先p中没有sayHello这个属性，
* 于是，他就需要到他的__proto__中去找，也就是PersonII.prototype，
* 而我们在上面定义了PersonII.prototype.sayHello=function(){};
* 于是，就找到了这个方法。
*/
function testCnstrctpttp(){
p.sayHello();
}
/** 继续...原型链 */
PersonII.prototype.age = 23;// 设定PersonII的属性
var Programmer = function () { };// 创建一个新对象Programmer,可以得出pp.__proto__ = Programmer.prototype;
/*
* 设 var tempp = new PersonII();
* ∵ Programmer.prototype = new PersonII();
* ∴ Programmer.prototype = tempp;
*
* ∵ tempp.__proto__ = PersonII.prototype;
* ∴ Programmer.prototype.__proto__ = PersonII.prototype;
* 设 var pp = new Programmer();
* ∴ pp.__proto__ = Programmer.prototype。
* ∴ pp.__proto__.__proto__ = PersonII.prototype。
*
*
* pp中没有sayHello()这个方法,所以到pp.__proto__中查找.
* pp.__proto__(也就是Programmer.prototype,也就是tempp,也就是PersonII(),)也没有sayHello()这个方法,所以到pp.__proto__.__proto__中查找
* pp.__proto__.__proto__也就是PersonII().prototype,在这里存在sayHello()这个方法
*
* age属性是同样的道理,只不过在Programmer.prototype的时候就已经找到age了,所以就不继续往下找了.
*/
/* 这也就是原型链的实现原理。
* 其实prototype只是一个假象，他在实现原型链中只是起到了一个辅助作用，
* 他只是在new的时候有着一定的价值，而原型链的本质，其实在于__proto__！
*/
Programmer.prototype = new PersonII();// ***
Programmer.prototype.writeCode = function () {
alert("print 'fuck the js with my jb'");
};
Programmer.prototype.age = 22;
var pp = new Programmer();
function testDbproto(){
pp.sayHello();
pp.writeCode();
alert(pp.age);
}
/********************************************/
/* JSON格式详细 */
/********************************************/
/* 1. */
var PersonIII = {
create: function (name, age) {
this.name = name;
this.age = age;
},
introduce: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
}
function JSONFontI(){
/*
* 这样是不行的,因为piii = Person.__proto__,而没有这样的 XXX.__proto___=Person.prototype,所以找不到PersonIII内部的方法
* var piii = new PersonIII()
* piii.create("junzi", 23);
* piii.introduce();
*/
PersonIII.create("junzi", 23);
PersonIII.introduce();
}
/* 2. */
/* 用X做一个中间变量，使得我们可以访问JSON对象的内部属性。*/
function JSONFontII(){
var x = function(){ };//必须有function()
x.prototype = PersonIII;
var px = new x();
px.create("junzi", 23);
px.introduce();
}
/* 3. */
/* 工厂模式 */
var Factory = {
createPersonIII : function (className,name,age) {
var temp = function () {
className.create(name, age);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
function testFactory(){
var person = Factory.createPersonIII(PersonIII,"junzi",23);
person.introduce();
}
/* 4. */
/* 抽象工厂模式 */
var abstractFactory = {
create: function (className, params) {
var temp = function () {
className.create.apply(this, params);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
function testAbstractFactory(){
var person = abstractFactory.create(PersonIII,["junzi",23]);
person.introduce();
}
</script>
</body>
</html>
评论 | 0 条评论