Javascript 之 面向对象
浏览数：29 /
时间：2015年06月09日
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>");
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
