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

最新推荐文章于 2023-06-02 09:52:29 发布

trr1994917

最新推荐文章于 2023-06-02 09:52:29 发布

阅读量468

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第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>

trr1994917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级程序设计(第2版)读书笔记第6-7章

第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
复制链接

扫一扫