<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js的注意点</title> <script type="text/javascript"> //关于解析和执行 console.log("后声明的变量值："+later_var); var later_var ="姗姗来迟"; console.log("后面声明的方法："+later_function); // 之后声明的方法和变量，名字相同，方法优先。 var later_function = "先于方法，声明的变量later_function"; function later_function(){ return "方法later_function"; } // var later_function ="后于方法，声明的变量later_function";//试着注释这条语句看一下 // 之前声明的方法和变量，名字相同，变量优先。 try{ console.log(later_function()); } catch (e){ console.log("出错信息:"+e); }; console.log(later_function); // 关于引用传递 var obj_a = {"a":"I am a","b":"no b"}; var obj_b = obj_a; obj_a["b"] = "you b"; console.log("对象是引用传递"+obj_b.b); var arr_a = [1]; var arr_b = arr_a; arr_a.push(2); console.log("数组是引用传递"+arr_b); // 关于局部变量和全局变量 (function set_global_var(){ var func_inner_var = "方法里面的局部变量"; window['func_global_var'] = "方法里面的全局变量"; func_global_var2 = "方法里面的全局变量2"; })(); if(true){ var if_inner_var = "if里面的局部变量"; } console.log(if_inner_var); console.log(func_global_var+"和"+ func_global_var2); try{ console.log(func_inner_var); } catch(e){ console.log("局部变量只能在function里面生成"); } //关于for in和hasOwnProperty Array.prototype["extra_prototype_string"] = "extra_prototype_string"; var loop_a = ["a"]; loop_a.prototype = "extra_a"; for(var i in loop_a){ console.log(loop_a[i]); } for(var i in loop_a){ if(loop_a.hasOwnProperty(i)){ console.log(loop_a[i]); } } // ==会类型转换，而===不会 console.log('"1"==1 is '+("1"==1)); console.log('"1"===1 is '+("1"===1)); console.log('"1"+2 = '+("1"+2)+" 注意12是字符串"); // 闭包 function closure(){ var a= 1; function inner_func(){ a++; return a; } return inner_func; } // 这里生成了闭包 var cl = closure(); console.log('生成了闭包：'+cl()+cl()+cl()); console.log('你以为这里没有生成闭包吗，其实这里产生闭包了，只不过马上释放了：'+closure()()+closure()()+closure()()); // 关于原型继承，这个例子来源于JavaScript秘密花园 // 函数Foo声明时，默认Foo.prototype.constructor = Foo function Foo() { this.value = 42; } Foo.prototype = { method: function() {return 43} }; function Bar() {} // 设置Bar的prototype属性为Foo的实例对象 Bar.prototype = new Foo(); console.log(new Foo().constructor); Bar.prototype.foo = 'Hello World'; /*修正Bar.prototype.constructor为Bar本身。 因为上面Bar.prototype被Foo函数实例给赋值了，导致丢失原来的Bar.prototype.constructor。当然，也有constructor，因为Bar.prototype是一个对象，所以constructor是function Object(){Native code}*/ Bar.prototype.constructor = Bar; var test = new Bar() // 创建Bar的一个新实例 console.log(new Bar().method()); console.log(Bar.prototype.constructor); console.log(test instanceof Bar); console.log(test instanceof Foo); </script> </head> <body> <button id="makeinput">生成 input</button> <p id="inpwrapper"></p> <script type="text/javascript"> /* 浏览器至少有三个线程，GUI渲染线程，JS线程，事件监听线程，HTTP监听线程，浏览器定时计时器线程。其中JS线程和GUI渲染线程互斥，也就是两个线程不能同时进行。 */ document.getElementById('makeinput').onmouseup = function() { var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', 'test1'); document.getElementById('inpwrapper').appendChild(input); /* 去掉setTimeout看看，什么效果。发现没有选中新生成的内容。因为这是onmousedown事件，onmousedown事件执行完后，chrome会把焦点还给浏览器，所以焦点不会聚在新生成的input里。但是onmouseup和click事件不会把焦点还给浏览器。setTimeout则把焦点聚焦的执行任务，放在js引擎的执行队列里，当onmousedown事件执行完后，就执行setTimeout里面的代码了，所以能聚焦了。*/ setTimeout(function() { input.focus(); input.select(); }, 0); }; </script> </body> </html>