【原】JavaScript灵活性体现一例
和阿昌讨论了一下JavaScript的灵活性,赶快记一笔。
1 <html> 2 <head> 3 <title>JavaScript灵活性</title> 4 <script type="text/javascript"> 5 // 写法1、完全不面向对象 6 /* 7 // 定义吃饭方法 8 function eat() { 9 alert('吃饭'); 10 } 11 // 定义睡觉方法 12 function sleep() { 13 alert('睡觉'); 14 } 15 // 调用吃饭方法 16 eat(); 17 // 调用睡觉方法 18 sleep(); 19 */ 20 21 // 写法2、面向对象(使用原型) 22 /* 23 // 声明Person类 24 var Person = function() {}; 25 // 声明Person的原型方法eat 26 Person.prototype.eat = function() { 27 alert('吃饭'); 28 }; 29 // 声明Person的原型方法sleep 30 Person.prototype.sleep = function() { 31 alert('睡觉'); 32 }; 33 // 实例化Person类 34 var p = new Person(); 35 // 调用吃饭方法 36 p.eat(); 37 // 调用睡觉方法 38 p.sleep(); 39 */ 40 41 // 写法3、面向对象 42 /* 43 // 声明Person类 44 var Person = function() {}; 45 46 Person.prototype = { 47 eat: function() { 48 alert('吃饭'); 49 }, 50 sleep: function() { 51 alert('睡觉'); 52 } 53 }; 54 55 // 实例化Person类 56 var p = new Person(); 57 // 调用吃饭方法 58 p.eat(); 59 // 调用睡觉方法 60 p.sleep(); 61 */ 62 63 // 写法4、面向对象 64 /* 65 // Function对象的原型属性添加method方法,有参数name和fn供传参 66 Function.prototype.method = function(name, fn) { 67 this.prototype[name] = fn; 68 }; 69 70 // 声明Person类 71 var Person = function() {}; 72 73 Person.method('eat', function() { 74 alert('吃饭'); 75 }); 76 77 Person.method('sleep', function() { 78 alert('睡觉'); 79 }); 80 81 // 实例化Person类 82 var p = new Person(); 83 // 调用吃饭方法 84 p.eat(); 85 // 调用睡觉方法 86 p.sleep(); 87 */ 88 89 // 写法5、面向对象(链式调用) 90 // 使用this返回给method方法的调用者 91 Function.prototype.method = function(name, fn) { 92 this.prototype[name] = fn; 93 return this; 94 }; 95 96 // 声明Person类 97 var Person = function() {}; 98 99 Person 100 .method('eat', function() { 101 alert('吃饭'); 102 }) 103 .method('sleep', function() { 104 alert('睡觉'); 105 }); 106 107 // 实例化Person类 108 var p = new Person(); 109 // 调用吃饭方法 110 p.eat(); 111 // 调用睡觉方法 112 p.sleep(); 113 </script> 114 </head> 115 <body> 116 好玩 117 </body> 118 </html>