js闭包+内置对象

1.js闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包</title>
    <script type="text/javascript">

        <!--函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制回收-->
        // function aa(b) {
        //     var a=12;
        //     function bb() {
        //         alert(a);
        //
        //         alert(b);
        //     }
        //     return bb;
        // }
        // var cc=aa(24);
        // cc();

    //    封闭函数
    //     var cc=(function (b) {
    //         var a=12;
    //         function bb(){
    //             alert(a);
    //             alert(b);
    //         }
    //         return bb;
    //     })(24);


    //    闭包的作用
    //    1.将一个变量长期驻扎在内存之中，可用于循环中存索引值

        window.onload=function () {
            var aLi=document.getElementsByTagName('li');
            alert(aLi.length);
            for (var i=0;i<aLi.length;i++){
                (function (i) {
                    aLi[i].onclick=function () {
                        alert(i);
                    }
                })(i);

            }
        }
     //   2.私有变量计数器，外部无法访问，避免全局变量的污染
        var count=(function () {
            var a=1;
            function bb() {
                a++;
                return a;
            }
            return bb;
        })();
        alert(count());
        alert(count());



    </script>
</head>
<body>
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

2.内置对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js跳转到源页面</title>

    <script type="text/javascript">

        // //跳转到源页面，referer
        // var backurl1=document.referrer;
        //
        // //处理中间的登录逻辑
        //
        // //获取或者重定url地址
        // window.location.href=backurl1;

        //获取地址栏参数
        window.onload=function () {
            var Data=window.location.search;
            var hash=window.location.hash;
            var oSpan=document.getElementById('span01');

            var arr=Data.split('=');

            var name=arr[1];

            oSpan.innerHTML=name;

            alert(hash);
        };


    </script>
</head>
<body>
<div id="div1">欢迎<span id="span01"></span>访问！</div>
</body>
</html>

3.js闭包做选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包做选项卡</title>

    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }

        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;
            color: #ffffff;
        }

        .btns input.cur{
            background-color: gold;
        }

        .contents div{
            width: 500px;
            height: 300px;
            display: none;
            line-height: 300px;
            text-align: center;
            background-color: gold;
        }

        .contents .active{
            display: block;
        }
    </style>
    <script type="text/javascript">

        window.onload=function () {
            var aBtns=document.getElementById('btns').getElementsByTagName('input');
            var aCon=document.getElementById('contents').getElementsByTagName('div');

            for (var i=0;i<aBtns.length;i++){
                (function (i) {
                    aBtns[i].onclick=function () {
                        for (var j=0;j<aBtns.length;j++){
                            aBtns[j].className='';
                            aCon[j].className='';
                        }
                        this.className='cur';
                        aCon[i].className='active';
                    }
                })(i);

            }
        }
    </script>
</head>
<body>
<div class="btns" id="btns">
    <input type="button" value="tab01" class="cur">
    <input type="button" value="tab02">
    <input type="button" value="tab03">

</div>
<div class="contents" id="contents">
    <div class="active">tab文字内容1</div>
    <div>tab文字内容2</div>
    <div>tab文字内容3</div>
</div>

</body>
</html>

4.js创建对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js面向对象-创建对象的方式</title>
    <script type="text/javascript">

//        <!--单体-->
//        var Tom={
//            name:'tom',
//            age:18,
//            showname:function () {
//                alert(this.name);
//            },
//            showage:function () {
//                alert(this.age);
//            }
//        }

        
    // //    工厂模式
    //     function Person(name, age, job) {
    //         var o={};
    //         o.name=name;
    //         o.age=age;
    //         o.job=job;
    //
    //         o.showname=function () {
    //             alert(this.name);
    //         }
    //         o.showage=function () {
    //             alert(this.age);
    //         }
    //         o.showjob=function () {
    //             alert(this.job);
    //         }
    //
    //
    //         return o;
    //     }
    //     var jack=Person('jack','21','程序员');
    //     alert(jack.job);


    // //    构造函数创建
    //     function Person(name, age,job) {
    //         this.name=name;
    //         this.age=age;
    //         this.job=job;
    //
    //         this.showname=function () {
    //             alert(this.name);
    //         }
    //
    //         this.showage=function () {
    //             alert(this.age);
    //         }
    //         this.showjob=function () {
    //             alert(this.job);
    //         }
    //
    //         return this;
    //     }
    //
    //     var rose=new Person('rose',20,'程序员');
    //     rose.showage();


    // //    原型模式prototype属性
    //     function Person(name, age, job) {
    //         this.name=name;
    //         this.age=age;
    //         this.job=job;
    //     }
    //
    //     Person.prototype.showname=function () {
    //         alert(this.name);
    //     };
    //     Person.prototype.showname=function () {
    //         alert(this.name);
    //     };
    //     Person.prototype.showname=function () {
    //         alert(this.name);
    //     };
    //
    //     var  tom=new Person('tom',19,"engine");
    //     tom.showname();
    //
    //     var jack=new Person('jack',18,'java');
    //     jack.showname();
    //
    //     alert(tom.showname()==jack.showname());
    //

    // //    继承
    //     function Fclass(name, age) {
    //         this.name=name;
    //         this.age=age;
    //     }
    //
    //     Fclass.prototype.showname=function () {
    //         alert(this.name);
    //     }
    //
    //     Fclass.prototype.showage=function () {
    //         alert(this.age);
    //     }
    //
    //     function Sclass(name,age,job) {
    //         //call改变对象，继承父类的属性或者使用apply
    //         Fclass.call(this,name,age);
    //         this.job=job;
    //     }
    //     //继承父类的方法，将父类的一个实例赋值给子类的原型属性
    //     Sclass.prototype=new Fclass();
    //
    //     Sclass.prototype.showjob=function () {
    //         alert(this.job);
    //     }


    </script>
</head>
<body>

</body>
</html>

猜你喜欢