閉包的理解及常見實例解析

時間 2019-11-19
標籤閉包理解常見實例解析简体版
原文原文鏈接
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button onclick="move()">點我跳轉</button>
<script>
 //閉包
    function f1() {
        var n = 999;

        function f2() {
            alert(n);
        }

        return f2;//其實此時的函數f2就是一個閉包，其實閉包就是可以讀取其餘函數內部變量的函數
        //在javascript中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成‘定義在一個函數內部的函數’，即閉包的本質就是
        //將函數內部和函數外部連接起來的一座橋樑
    }
    f1()();

 //用途 1.能夠讀取函數內部的變量；2.讓這些變量的值始終保持在內存中
    function f3() {
        var n = 999;
        nAdd = function () {
            n += 1;
        };
        function f4() {
            alert(n);
        }

        return f4;
    }
    var result = f3();
    result();//在這裏result其實就是閉包f2函數，此時result是一個全局的變量，函數nAdd也是全局的變量，
    // 說白了其實就是經過全局變量來操做局部變量，並且f2是f1大的子函數，f2被賦給了一個全局的變量，致使f2一直在內存中
    //而f2的存在依賴於f1，因此，f1也一直存在在內存中，調用結束後，不會被垃圾回收機制所回收。，nAdd其實也是一個閉包
    nAdd();
    result();

 //使用閉包的注意點
    //1.閉包會使得變量一直存在內存中，內存消耗大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中會致使內存的泄露，
    //解決辦法是 在退出函數以前，將不使用的局部變量所有刪除。
    //2.閉包會在父函數的外部，改變夫函數的值。因此，若是你把父函數看成對象使用，把閉包看成它的公用的方法，把內部變量看成它的
    //私有屬性，這時要當心，不要隨便的改變父函數內部變量的值；
    var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
    alert(object.getNameFunc()());//The Window

    var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name;
            };
        }
    };
    alert(object.getNameFunc()());//My Object


// //常見的經典實例
    var points = [
        {x: 0, y: 0}, {x: 1, y: 1}
    ];
    //這裏的this指代的是points數組中對象
    points.dist = function () {
        var p1 = this[0];
        var p2 = this[1];
        var a = p2.x - p1.x;
        var b = p2.y - p1.y;
        return Math.sqrt(a * a + b * b);
    };
    console.log(points.dist());

    //階乘的表示函數1
    function fn(n) {
        var i, product = 1;
        for (i = 2; i <= n; i++) {
            product *= i;
        }
        return product;
    }
    console.log(fn(5));//120
    //階乘的表示函數2
    function fn1(n1) {
        var product1 = 1;
        while (n1 > 1) {
            product1 *= n1;
            n1--;
        }
        return product1;
    }
    console.log(fn1(5));//120

    //實例化對象 並賦方法，計算該點到原點的距離、
    function Point(x1, y1) {
        this.x1 = x1;//this指代初始化的實例
        this.y1 = y1;
    }
    var p = new Point(1, 1);
    Point.prototype.r = function () {
        return Math.sqrt(
                this.x1 * this.x1 + this.y1 * this.y1
        );
    };
    p.r();
    document.write(p.r());

    function move() {
        var answer = confirm(" Are you sure exit");
        if (answer) {
            window.location = "http://www.baidu.com";
        }
        setTimeout(move, 3000);
    }
    var a1 = [3, 1, 5, 2, 7, 4];
    console.log(a1.sort());

    var a = {};
    b = {"key": "1"};
    c = {"key": "c"};
    a[b] = 123;
    console.log(a);//{{object object}:123}
    a[c] = 678;
    console.log(a[b]);//678;
    console.log(a);//{{object object}:678}
    class Dog {
        constructor() {
            this.type = 'dog';
        }

        says(say) {
            setTimeout(function () {
                console.log(this.type + 'says' + say);
            }, 1000)
        }
    }
    var dog = new Dog();
    //    anmial.says("hi");//anmial is not defined
    dog.says("hi");//undefinedsayshi;

    var newObject = {
        foo: "bar",
        func: function () {
            var self = this;
            console.log("outer func:this.foo=" + this.foo);////outer func:this.foo=bar
            console.log("outer func:self.foo=" + self.foo);//outer func:self.foo=bar
            (function () {
                console.log("inner func:this.foo=" + this.foo);//inner func:this.foo=undefined
                console.log("inner func:self.foo=" + self.foo);//inner func:self.foo=bar
            }());
        }
    };
    newObject.func();//undefinedsayshi
</script>
<!--定時器實現多長時間後跳轉的問題-->
<p style="text-indent: 2em; margin-top: 30px;">
    系統將在 <span id="time">10</span> 秒鐘後自動跳轉至新網址，若是未能跳轉，<a href="http://www.baidu.com" title="點擊訪問">請點擊</a>。</p>
<script type="text/javascript">
    delayURL();
    function delayURL() {
        var delay = document.getElementById("time").innerHTML;
        var t = setTimeout("delayURL()", 1000);
        if (delay > 0) {
            delay--;
            document.getElementById("time").innerHTML = delay;
        } else {
            clearTimeout(t);
            window.location.href = "http://www.baidu.com";
        }
    }
    ;
    var a = document.createElement('div');
    a.id = "add";
    a.innerHTML = "<h1>你們好</h1>";
    document.body.appendChild(a);
</script>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。