草珊瑚认为的JavaScript的注意点 

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

 

posted @ 2013-01-11 20:40  草珊瑚  阅读(259)  评论(0)  编辑  收藏  举报