JS高级程序设计(第2版)读书笔记第6-7章

来源：互联网发布：红外成像目标跟踪算法编辑：程序博客网时间：2024/06/05 10:23

第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); // 5131 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>

0 0