第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
执行环境作用域
⒈ 内部作用域链可以访问所有的外部环境,但外部环境不能访问内部环境听任何变量和函数。
<script type="text/javascript">
var color = "blue";
function changeColor(){
if(color === "blue"){
color = "red";
}else{
color = "blue";
}
}
changeColor();
alert(color); // red
</script>
延长作用域链
⒈ try-catch语句中的catch
⒉ with语句
<script type="text/javascript">
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 "<"; 332 case ">": 333 return ">"; 334 case "&": 335 return "&"; 336 case "\"": 337 return """; 338 } 339 }); 340 } 341 342 alert(htmlEscape("<p class=\"green\">Hello world!</p>")); 343 // <p class="green">Hello world!</p> 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>