Javascript 之 面向对象

 1 <script type="text/javascript">
 2   /*
 3   01-创建对象
 4   */
 5   var obj = new Object(); // 创建对象
 6   obj.name = "huang";
 7   obj.age = 24;
 8   obj.fn = function(){
 9        return "姓名："+this.name+" "+"年龄："+this.age; // 当前作用域下的对象（obj作用域下，代表obj对象本身）
10       };  

 1 /*
 2   02-工厂模式
 3   */ 
 4   var createObjFactory = function(name,age){
 5         var obj = new Object();
 6         obj.name = name;
 7         obj.age = age;
 8         obj.fn = function(){
 9             return "姓名："+this.name+" "+"年龄："+this.age; 
10             };
11         return obj;
12       };
13       
14       // 创建一个用户对象
15   var user = createObjFactory("huang",24);

 1 /*
 2       03-构造函数模式（改良后的工厂方法）
 3       */
 4       /*
 5       ①构造函数 没有 new Object()
 6       ②this 就相当于 obj
 7       ③后台会自动创建对象
 8       ④不需要返回对象
 9       ⑤构造函数必须使用 new 运算符
10       */
11       var Constructor = function(name,age){ // this 代表Constructor (构造函数名最好大写)
12           this.name = name;
13           this.age = age;
14           this.fn = function(){
15               return "姓名："+this.name+" "+"年龄："+this.age; 
16               };
17           };
18    
19    // 创建对象
20    var constructor1 = new Constructor("张",25);
21    var constructor2 = new Constructor("王",29);

1 /*
2    04-对象冒充
3    */ 
4    var o = new Object();
5    Constructor.call(o,‘张三‘,26);

 1 /*
 2       05-原型
 3       ①地址共享
 4       ②每一个原型都有一个prototype属性
 5       */
 6       var PrototypeFn=function(){};
 7       
 8       PrototypeFn.prototype.userName="小花"; // 原型属性
 9       PrototypeFn.prototype.age = 18;
10       PrototypeFn.prototype.fn = function(){
11            return "姓名："+this.userName+";年龄:"+this.age;
12           }
13           
14           var prototypeFn1 = new PrototypeFn();
15           var prototypeFn2 = new PrototypeFn();
16           
17           // 5.1
18           document.write(prototypeFn1.constructor); // 构造属性(会打印出构造函数本身)
19           
20           // 5.2 返回true  地址是相同的
21           document.write(prototypeFn2.fn==prototypeFn1.fn);
22           
23           // 5.3 判断一个对象的实例是否是一个原型对象
24           document.write(PrototypeFn.prototype.isPrototypeOf(prototypeFn1));
25           
26           prototypeFn1.userName = "张三"; // 实例属性
27           document.write(prototypeFn1.age); // 打印出原型的属性
28           document.write(prototypeFn1.userName);  // 打印出实例属性 “张三” 就近原则
29           
30           // 5.4 删除实例属性
31           delete prototypeFn1.userName; //  (实例对象无法删除原型属性)
32           document.write(prototypeFn1.userName); // 打印出原型属性 “小花”
33           
34           // 5.5 删除原型属性
35           delete PrototypeFn.prototype.userName; 
36           document.write(prototypeFn1.userName);
37           document.write(prototypeFn1.userName+"<br>");
38           
39           // 5.6 判断实例中对象中是否有指定的属性 hasOwnProperty() 方法无法判断 原型对象中是否有此属性
40           prototypeFn1.sex = ‘男‘;
41           document.write(prototypeFn1.hasOwnProperty(‘sex‘)+"<br>"); // 结果： true
42           document.write(PrototypeFn.hasOwnProperty(‘age‘)+"<br>");
43           
44           // 5.7 可以通过 in 判断是否存在属性 （无论是实例属性还是原型属性 只要有就返回 true否则返回 false）
45           document.write((‘sex‘ in prototypeFn1)+"<br>"); // 结果： true
46           document.write((‘age‘ in prototypeFn1)+"<br>"); // 结果： true
47           
48           // 5.8 判断 原型中是否有属性
49           var isProtopotyProperty=function(obj,propertyName){
50                 return !obj.hasOwnProperty(propertyName) && (propertyName in obj)
51               }
52           document.write(isProtopotyProperty(prototypeFn1,‘age‘)+"<br>"); // 结果： true
53           document.write(isProtopotyProperty(prototypeFn1,‘sex‘)+"<br>"); // 结果： false

 1 /*
 2       06-使用字面量的方式创建原型
 3       */
 4       var PrototypeFn=function(){};
 5       var prototypeFn1 = new PrototypeFn();
 6       
 7       // 6.1 无法使用对象实例访问到 prototype
 8       document.write(prototypeFn1.prototype+"<br>"); // 结果: undefined
 9       
10       // 6.2 可以通过 __proto__ 去访问
11       document.write(prototypeFn1.__proto__+"<br>");  // 结果 object
12       
13       // 6.3 使用对象名可以访问
14       document.write(PrototypeFn.prototype+"<br>"); // 结果 object
15       
16       // 6.4 使用字面量的方式创建原型对象,这里{}就是对象，new Object 相当于{}
17       PrototypeFn.prototype={
18           userName:"张三",
19           age:19,
20           fn:function(){
21               return "your name is "+this.userName;
22               }
23       }; 
24       
25       var prototypeFn2 = new PrototypeFn();
26       document.write(prototypeFn2.fn()+"<br>");
27       
28       document.write(prototypeFn2.constructor+"<br>"); // 结果是 Object 而不是 PrototypeFn
29       
30       // 6.5 让创建的对象的重新指回 PrototypeFn 要强制的指定
31       PrototypeFn.prototype={
32           constructor:PrototypeFn, // 强制的指向 PrototypeFn
33           userName:"张三",
34           age:19,
35           fn:function(){
36               return "your name is "+this.userName;
37               }
38       }; 
39       
40       var prototypeFn3 = new PrototypeFn();
41       
42       document.write((prototypeFn3.constructor==PrototypeFn)+"<br>"); // 结果是 true 
43       
44       // 6.6 重写原型对象
45       PrototypeFn.prototype={
46           sex:‘女‘,
47           fn:function(){
48               return "your sex is "+this.sex;
49               }
50       }; 
51       
52     var prototypeFn4 = new PrototypeFn();
53     
54     // 原型被重写后 和 之前的实例就切断了
55     document.write(prototypeFn4.userName+"<br>"); // 结果 undefined 

 1 /*
 2       07-扩展 内置引用类型的扩展方法
 3       */
 4       
 5     // 7.1 如 split、substring 都是 是 string对象的原型方法 可以通过下面方式查看
 6       document.write(String.prototype.split+"<br>");
 7       document.write(String.prototype.substring+"<br>");
 8       
 9       // 7.2 自己扩展一个 String 的 原型方法 （在字符串后面添加字符）
10       
11       String.prototype.addString = function(){
12             return this+";this is add string!";
13           }
14           
15       document.write(‘abcde‘.addString()+"<br>"); // 结果 "abcde;this is add string!"
16       document.write("<br>");