编程语言
首页 > 编程语言> > 前端常用的库和实用技术之JavaScript高级技巧

前端常用的库和实用技术之JavaScript高级技巧

作者:互联网

javascript高级技巧
变量作用域和闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // js是函数级作用域,在内部的变量内部都能访问,外部不能访问内部的,内部能访问外部的
        test();
        var j;
        j = 1000;
        function test(){
            if(false){
                var i=10;
            }else{
                var t =100;
            }
            console.log('bbb',t);
            console.log('cccc',j);
        }
        alert('....',t);
    </script>
    <script>
        var j = 100;
        ~(function test(){
            console.log(j);
        })();
        //100
        //-1
    </script>
    <script>
        var j =100;
        function test(){
            var j;
            alert(j);//拿不到外面的J,里面的j值,war在前面
            j=10
        }
        //执行test()根本取不到
        test()
    </script>
    <script>
        //闭包:闭包就是拿到本不属于它的东西
        var j = 100;
        function test(){
            var j;
            j = 10;
            var k = 666;
            return function(){
                return k;
            }
            alert(j);
        }
        var t = test()();
        alert(t);

    </script>
</body>
</html>

this指针的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // window.m = 100;
        // // this指针的使用
        // function test(){
        //     alert(this.m);
        // }
        // window.test();

        this.m = 1000;
        var obj = {
            m:100,
            test:function(){
                alert(this.m);
                return function(){
                    alert(this.m);//
                }
            } 
        }
        // 谁调指向谁
        var t = obj.test()
        window.t();
        //上面等同于
    //    (obj.test()) ();
    </script>
</body>
</html>
<script>
        this.a = 1000;
        function test(){
            this.a = 1;
        }
        test.prototype.geta = function(){
            return this.a;
        }
        var p = new test;
        console.log(p.geta);
    </script>
    <script>
        function test(){
            this.a = 1;
        }
        test.prototype.a = 100;
        var p = new test;
        console.log(p);
    </script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" id="test" value="test" style="color:red;">
    <script>
        var style = {
            color:"green"
        }
        window.test();
        document.getElementById("test").click = test;
        function test(){
            alert(this.style.color);
        }
    </script>
</body>
</html>

按值传递和按引用传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function test(num){
            //这里对num 创建了一个内存的副本
            var num = num+1;
            return num;
        }
        var num = 1;
        alert(test(num));
        alert(num);
    </script>
    <script>
    function test(obj){
        obj.age = "20"
        console.log('内部obj',obj);
    }
    var obj = {
        name:'xiaoming'
    }
    test(obj);
    console.log('外部的..',obj);
    </script>
</body>
</html>

by上面的例子其实不够经典也不够高级
本文看自前端常用的库和实用技术之JavaScript按值传递和按引用传递

标签:function,obj,实用技术,前端,JavaScript,alert,var,num,test
来源: https://www.cnblogs.com/smart-girl/p/11548270.html