第6章 面向对象有点云里雾里:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>第6章 面向对象的程序设计</title> 6 7 </head> 8 <body> 9 10 <script type="text/javascript"> 11 12 /** 创建对象 **/ 13 14 var person = new Object(); 15 person.name = "luckyLu"; 16 person.age = 30; 17 person.job = "web front end"; 18 19 person.sayName = function(){ 20 alert(this.name); 21 } 22 23 /** 24 * 工厂模式 25 * 26 function createPerson(name, age, job) { 27 var o = new Object(); 28 o.name = name; 29 o.age = age; 30 o.job = job; 31 o.sayName = function(){ 32 alert(this.name); 33 } 34 return o; 35 } 36 37 var person1 = createPerson("luckyLu", 30, "web front end"); 38 var person2 = createPerson("vimerLu", 28, "IT"); 39 40 person1.sayName(); 41 person2.sayName(); 42 43 */ 44 45 /** 46 * 构造函数模式 实例化构造函数要用new 47 * 48 49 function Person(name, age, job) { 50 this.name = name; 51 this.age = age; 52 this.job = job; 53 this.sayName = function(){ 54 alert(this.name); 55 }; 56 } 57 58 var person1 = new Person("luckyLu", 30, "web front end"); 59 var person2 = new Person("vimerLu", 28, "IT"); 60 61 person1.sayName(); 62 person2.sayName(); 63 64 // 作为普通函数调用 65 Person("luck", 29, "web"); 66 window.sayName(); 67 68 // 在另一个对象的作用域中调用 69 var o = new Object(); 70 Person.call(o, "Object", 22, "FE"); 71 o.sayName(); 72 */ 73 74 /** 75 * 原型模式 76 * 77 function Person() { 78 79 } 80 Person.prototype.name = "luckLu"; 81 Person.prototype.age = 28; 82 Person.prototype.job = "web front end"; 83 Person.prototype.sayName = function () { 84 alert(this.name); 85 } 86 87 var person1 = new Person(); 88 person1.sayName(); // lucklu 89 90 var person2 = new Person(); 91 person2.sayName(); // lucklu 92 93 alert(person1.sayName == person2.sayName); // true 94 */ 95 96 /** 97 * 组合使用构造函数模式和原型模式 98 * 99 function Person(name, age, job) { 100 this.name = name; 101 this.age = age; 102 this.job = job; 103 } 104 Person.prototype = function(){ 105 constuctor : Person; 106 sayName : function(){ 107 alert(this.name); 108 } 109 } 110 var person1 = new Person("luckyLu", "28", "front end"); 111 var person2 = new Person("vimerLu", "29", "web dev"); 112 */ 113 114 /** 115 * 动态原型模式 116 * 117 */ 118 function Person(name, age, job) { 119 this.name = name; 120 this.age = age; 121 this.job = job; 122 if (typeof this.sayName != "function") { 123 Person.prototype.sayName = function(){ 124 alert(this.name); 125 } 126 } 127 } 128 129 /** 130 * 寄生构造函数模式 131 * 132 */ 133 function Person(name, age, job) { 134 var o = new Object(); 135 o.name = name; 136 o.age = age; 137 o.job = job; 138 o.sayName = function(){ 139 alert(this.name); 140 } 141 } 142 143 144 </script> 145 146 147 </body> 148 </html>
第7章 匿名函数
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>第7章 匿名函数</title> 6 7 </head> 8 <body> 9 10 <div id="div1">div1</div> 11 12 <script type="text/javascript"> 13 /** 14 * 函数声明 15 * 代码执行前被加载到作用域中 16 */ 17 function funName(arg0, arg1, arg2) { 18 // 函数体 19 } 20 /** 21 * 函数表达式 22 * 代码执行到那一行的时候才会有定义 23 */ 24 var funName = function(arg0, arg1, arg2){ 25 // 函数体 26 } 27 28 /** 29 * 递归中的使用 30 * 31 function factorial(num) { 32 if(num <= 1){ 33 return 1; 34 }else { 35 //return num * factorial(num - 1); 36 return num * arguments.callee(num - 1); 37 } 38 } 39 var anotherFactorial = factorial; 40 factorial = null; 41 alert(anotherFactorial(4)); // factorial is not function, callee 24 ok 42 */ 43 44 /** 45 * 闭包与变量 46 * 47 function createFunctions() { 48 var result = new Array(); 49 for (var i = 0; i < 10; i++) { 50 //result[i] = function(){ 51 // return i; 52 //} 53 result[i] = function(num){ 54 return function(){ 55 return num; 56 } 57 }(i) 58 } 59 return result; 60 } 61 var funcs = createFunctions(); 62 for (var i = 0; i < funcs.length; i++) { 63 document.write(funcs[i]() + "<br />"); // 都是 10 修改后是 1 2 3 …… 10 64 } 65 */ 66 67 /** 68 * this对象 69 * 70 var name = "The window"; 71 var object = { 72 name : "My Object", 73 getNameFunc : function(){ 74 return function(){ 75 return this.name; 76 } 77 } 78 } 79 alert(object.getNameFunc()());// The window 80 */ 81 82 /** 83 * 84 * 85 var name = "The window"; 86 var object = { 87 name : "My Object", 88 getNameFunc : function(){ 89 var that = this; 90 return function(){ 91 return that.name; 92 } 93 } 94 } 95 alert(object.getNameFunc()());// My Object 96 */ 97 98 /** 99 * 内存泄漏 100 * 101 */ 102 function assignHandler() { 103 var ele = document.getElementById("div1"); 104 ele.onclick = function(){ 105 alert(ele.id); 106 } 107 } 108 //assignHandler(); 109 // 解决方法 110 function assignHandler() { 111 var elem = document.getElementById("div1"); 112 var id = elem.id; 113 elem.onclick = function(){ 114 alert(id); 115 } 116 elem = null; 117 } 118 //assignHandler(); 119 120 /** 121 * 块级作用域 122 * 123 */ 124 function outputNumbers(count) { 125 for (var i = 0; i < count; i++) { 126 alert(i); 127 } 128 alert("last: " + i); 129 } 130 //outputNumbers(5); // 5 131 132 133 /** 134 * 私有变量 模块模式 135 * 136 */ 137 var singleton = functions(){ 138 139 // 私有变量 140 var privateVariable = 10; 141 142 // 私有函数 143 function privateFunction() { 144 return false; 145 } 146 // 特权 共有方法和属性 147 return { 148 publicProperty : true, 149 pubiicMethod : function(){ 150 privateVariable ++; 151 return privateFunction(); 152 } 153 } 154 } 155 156 157 </script> 158 159 160 </body> 161 </html>