JS高级程序设计(第2版)读书笔记第4-5章_var color = "blue"; function changecolor() { if (c-CSDN博客

第4章变量、作用域和内存问题

基本数据类型和引用类型

typeof 检测变量类型是不是基本类型

var s = "abc";

var b = true;

var i = 22;

var u;

var n = null

var o = new Object();

alert(s); // string

alert(b); // boolean

alert(i); // number

alert(u); // undefined

alert(n); // object

alert(o); // object

instanceof 引用类型返回true

执行环境作用域

⒈ 内部作用域链可以访问所有的外部环境，但外部环境不能访问内部环境听任何变量和函数。

var color = "blue";

function changeColor(){

if(color === "blue"){

color = "red";

}else{

color = "blue";

}

changeColor();

alert(color); // red

</script>

延长作用域链

⒈ try-catch语句中的catch

⒉ with语句

function buildUrl() {

var qs = "?debug=true";

with(location){

var url = href + qs; // location.href

}

return url;

}

var result = buildUrl();

alert(result);

</script>

第5章引用类型

  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>第5章引用类型</title>
  6 
  7 </head>
  8 <body>
  9 
 10 <script type="text/javascript">
 11 
 12 /** object 类型 **/
 13 
 14 // new操作符
 15 var person = new Object();
 16 person.name = "luckyLu";
 17 person.age = 30;
 18 
 19 // 对象字面量
 20 var person = {
 21     name: "luckyLu",
 22     age: 30
 23 };
 24 
 25 function displayInfo(args) {
 26     var output = "";
 27     if (typeof args.name == "string") {
 28         output += "Name:" + args.name + "\n";
 29     }
 30     if (typeof args.age == "number") {
 31         output += "Age:" + args.age + "\n";
 32     }
 33     //alert(output);
 34 }
 35 displayInfo({
 36     name: "luckyLu",
 37     age: 30
 38 });
 39 
 40 /** Array 类型 **/
 41 
 42 // new操作符
 43 var colors = new Array();
 44 colors[0] = "red";
 45 colors[1] = "green";
 46 colors[2] = "blue";
 47 
 48 // 字面量
 49 var colors = ["red", "green", "blue"];
 50 colors.length = 2;  // 通过设置数组长度删除了最后一个值
 51 //alert(colors[2]);   // undefined
 52 
 53 colors[colors.length] = "black";    // 通过数组的length 为数组添加新的值
 54 colors[colors.length] = "brown";
 55 //alert(colors);
 56 
 57 // 转换方法：toLocaleString() toString() valueOf()
 58 //alert(colors.toString());   // red,green,black,brown
 59 //alert(colors.valueOf());    // red,green,black,brown
 60 //alert(colors);              // red,green,black,brown
 61 
 62 var person1 = {
 63     toLocaleString: function () {
 64         return "luckyLu";
 65     },
 66     toString: function () {
 67         return "lucky";
 68     }
 69 };
 70 var person2 = {
 71     toLocaleString: function () {
 72         return "vimerLu";
 73     },
 74     toString: function () {
 75         return "vimer";
 76     }
 77 };
 78 var people = [person1, person2];
 79 //alert(people);                  // luck,vimer
 80 //alert(people.toString());       // luck,vimer
 81 //alert(people.toLocaleString()); // luckyLu,vimerLu 调用的数组每一项的toLocaleString()方法
 82 
 83 /**
 84  * 栈方法：先进后出 push() pop()
 85  * push() 在数组最后添加新元素 并返回数组的长度
 86  * pop() 删除数组的最后一个元素 并返回该元素
 87  *
 88 
 89 var colors = new Array();
 90 
 91 var count = colors.push("red", "green");
 92 alert(count);   // 2
 93 
 94 colors.push("black");
 95 alert(colors.length);   // 3
 96 
 97 var item = colors.pop();
 98 alert(item);    // black
 99 alert(colors.length);
100 
101 colors.push(colors.pop());  // 数组不会发生任何变化
102 alert(colors);  // red,green
103 
104  */
105 
106 /**
107  * 队列方法：先进先出
108  * unshift() 在数组头部添加元素 并返回数组的长度(在IE8一下的版本总是返回undefined 而不是数组的长度)
109  * shift() 删除数组的第一个元素 并返回该元素
110  *
111 var colors = new Array();
112 
113 var count = colors.unshift("red", "green");
114 alert(count);
115 
116 count = colors.unshift("black");
117 alert(colors);  // black,red,green
118 
119 var item = colors.shift();
120 alert(item);
121 alert(colors.length);
122 
123  */
124 
125 /**
126  * 数组排序
127  * reverse 反序
128  * sort 升序（或降序）
129  *
130 var arr1 = [1, 2, 3, 4, 5];
131 arr1.reverse();
132 alert(arr1);    // [5, 4, 3, 2, 1]
133 
134 var arr2 = [0, 1, 5, 10, 15];
135 arr2.sort();
136 alert(arr2);    // 0, 1, 10, 15, 10 这里是按照字符串位置进行比较的
137 
138 function compare(value1, value2) {
139     //return value2 - value1; // 倒序
140     return value1 - value2; // 正序
141 }
142 arr2.sort(compare);
143 alert(arr2);
144 
145  */
146 
147 /** 
148  * 操作方法
149  * concat() 连接数组 返回连接后的新数组
150  * slice() 过滤 数组返回新的数组
151  * splice() 删除添加和替换 数组 改变的原数组
152  *
153 var colors = ["red", "green", "blue"];
154 
155 var colors2 = colors.concat("yellow", ["black", "brown"]);
156 alert(colors2); // red, green, blue, yellow, black, brown
157 
158 var colors3 = colors2.slice(1); // 返回指定下标位置开始到数组结尾的新数组
159 alert(colors3); // green, blue, yellow, black, brown
160 
161 //var colors4 = colors2.slice(1,4);   // 指定下标位置开始到 指定位置结束（不包括该元素）
162 var colors4 = colors2.slice(-5,-2);     // 与上一行等同
163 alert(colors4); // green, blue, yellow
164 
165 // 删除
166 var removed = colors.splice(0,1);
167 alert(colors);     // red
168 
169 // 添加
170 removed = colors.splice(1, 0, "#FFF", "#000");
171 alert(colors);
172 // 替换 
173 
174 removed = colors.splice(1, 2, "#CCC", "#666");
175 alert(colors);
176 
177  */
178 
179 /**
180  * Date 类型
181  * getTime() 返回表示日期的毫秒数
182  * setTime() 以毫秒数设置日期
183  * getFullYear() 取得4位的年份
184  * 
185 
186 var now = new Date();
187 alert(now);
188 
189 var someDate = new Date("May 25, 2012");
190 alert(someDate.getTime());  // 返回表示日期的毫秒数
191 
192  */
193 
194 /** 
195  * RegExp 类型
196  * g 表示全局 global
197  * i 表示忽略大小写 ignoreCase
198  * m 表示多行模式 multiline
199  * exex() 执行匹配,返回匹配的结果
200  * test() 返回true false 是否匹配到了
201  * 
202 var text = "mom and dad and baby";
203 var pattern = /mom( and dad ( and babdy)?)?/gi;
204 var matches = pattern.exec(text);
205 alert(matches);
206 
207 var text = "000-00-0000";
208 var pattern = /\d{3}-\d{2}-\d{4}/;
209 if (pattern.test(text)) {
210     alert("匹配成功！");
211 }
212 
213  */
214 
215 /** Function 类型 **/
216 
217 // 可以在任何位置调用 alert(sum(10, 20));
218 function sum(n1, n2) {
219     return n1 + n2;
220 }
221 
222 // 匿名函数 赋值给一个变量 不能在声明前面调用 alert(sum(10, 20));    
223 var sum = function(n1, n2){
224     return n1 + n2;
225 };
226 
227 // 无重载
228 
229 /**
230  * 函数的名字仅仅是一个包含指针的变量
231  * length 返回函数的参数个数
232  * arguments 函数的参数集合
233  * callee 是一个指针 指向拥有这个arguments 对象的函数
234  * this 是函数在执行时所处的作用域
235  *
236 
237 // 阶乘
238 function factorial(num) {
239     if (num <= 1) {
240         return 1;
241     }else {
242         return num * factorial(num - 1);
243     }
244 }
245 // 修改后
246 function factorial(num) {
247     if (num < 1) {
248         return 1
249     }else {
250         return num * arguments.callee(num - 1);
251     }
252 }
253 alert(factorial(4));
254 
255  */
256 
257 
258 /**
259  * apply() 包含两个参数 第一个是 运行函数的作用域 第二个是数组的实例也可以是arguments
260  * call() 和apply 第一个参数是相同的 第二个参数是直接传递给函数
261  * apply call 来扩充作用域的最大好处 就是对象不需要与方法有任何的耦合关系
262  *
263 function sum(n1, n2) {
264     return n1 + n2;
265 }
266 
267 function callSum1(n1, n2) {
268     return sum.apply(this, arguments);
269 }
270 function callSum2(n1, n2) {
271     return sum.apply(this, [n1, n2]);
272 }
273 alert(callSum1(10, 10)); // 20
274 alert(callSum2(10, 20)); // 30
275 
276 function callSum(n1, n2) {
277     return sum.call(this, n1, n2);
278 }
279 alert(callSum(10, 30)); // 40
280 
281 window.color = "red";
282 var o = {color: "blue"};
283 
284 function sayColor() {
285     alert(this.color);
286 }
287 sayColor();             // red
288 sayColor.call(this);    // red
289 sayColor.call(window);  // red
290 sayColor.call(o);       // blue
291 
292  */
293 
294 /** 基本包装类型 **/
295 
296 /**
297  * String 
298  *  charAt() 返回指定索引的字符 
299  *  charCodeAt() 返回索引位置字符的编码
300  *  concat() 连接字符串
301  *  slice()
302  *  substr()
303  *  substring()
304  *  indexOf()
305  *  lastIndexOf()
306  *  toLowerCase()
307  *  toLacaleLowerCase() //针对少数语言会为Unicode 大小写转换应用特殊规则
308  *  toUpperCase()
309  *  toLacaleUpperCase()
310  *  match()
311  *  exex()
312  *  replace()
313  *  split()
314  *  localeCompare() 比较字符串 返回1 0 -1
315  *  fromCharCode() 接收一个或多个字符编码，将它们转换成字符串
316  *  
317  * Boolean
318  * Number toFixed()返回指定的小数位数
319  * 
320 var num = 10;
321 alert(num.toFixed(2));
322 
323 var s = "hello world";
324 alert(s.charAt(2));     //l
325 alert(s.charCodeAt(2)); //108
326 
327 function htmlEscape(text) {
328     return text.replace(/[<>"&]/g, function(match, pos, originalText){
329         switch(match){
330             case "<":
331                 return "&lt;";
332             case ">":
333                 return "&gt;";
334             case "&":
335                 return "&amp;";
336             case "\"":
337                 return "&quot;";
338         }
339     });
340 }
341 
342 alert(htmlEscape("<p class=\"green\">Hello world!</p>"));
343 // &lt;p class=&quot;green&quot;&gt;Hello world!&lt;/p&gt;
344 
345  */
346 
347 /** 内置对象 **/
348 /**
349  * Global isNaN() parseInt()等 都是Global对象的方法
350  * encodeURI() 不会对特殊字符进行编码 例如 冒号 问号 正斜线 井号
351  * encodeURIComponent() 对任何非标准字符进行编码
352  * decodeURI()
353  * decodeURIComponent()
354  * eval() 
355  *
356 
357 var url = "http://www.qq.com/index test.html";
358 alert(encodeURI(url));
359 // http://www.qq.com/index%20test.html 会把空格编码为%20
360 
361 alert(encodeURIComponent(url));
362 // http%3A%2F%2Fwww.qq.com%2Findex%20test.html 
363 
364  */
365 
366 /**
367  * Math 对象
368  * Math.min()
369  * Math.max()
370  * Math.ceil() 上舍入
371  * Math.floor() 下舍入
372  * Math.round() 标准舍入 4舍5入
373  * Math.random() 返回0-1之间的随机数
374  *
375  */
376 
377 
378 </script>
379 
380 </body>
381 </html>