一、閉包Closures

js中的閉包是函數(shù) （一個(gè)封閉的對(duì)外不公開(kāi)的包裹結(jié)構(gòu)或空間）

1、閉包要解決的問(wèn)題

• 在函數(shù)外部訪問(wèn)不到函數(shù)內(nèi)部的數(shù)據(jù)

• 要解決的問(wèn)題就是需要在外部間接的訪問(wèn)函數(shù)內(nèi)部的數(shù)據(jù)

2、基本結(jié)構(gòu)

 function outer(){
        var data = "數(shù)據(jù)";        return function(){
            return data;
        }
    }

 function outer(){
    var data = "數(shù)據(jù)";     return {
         getData:function(){
             return data;
         },
         setData:function(value){
             data = value;             return data;
         }
     }
 }

3、閉包的應(yīng)用

1）用閉包來(lái)解決定時(shí)器的問(wèn)題

由于js是單線程執(zhí)行的，會(huì)先執(zhí)行主任務(wù)，然后執(zhí)行次要任務(wù)(包括setTimeOut和setInterval中的回調(diào)函數(shù)中的代碼)

例如：

for(var i = 0 ; i < 10; i++){
    setTimeout(function(){
         console.log(i);
     },0);
 }

并不會(huì)如愿打印出1~10，而是打印出10個(gè)10 因?yàn)閒or循環(huán)執(zhí)行完畢后才會(huì)執(zhí)行setTimeout回調(diào)函數(shù)，如果時(shí)間到了就執(zhí)行

解決：

 for(var i = 0; i< 3; i++){   function foo(j){
        return function(){
            console.log(j);
        };
    }    var f = foo(i);
    setTimeout(f, 0);
}

這樣打印出來(lái)就是1 2 3

2）用閉包來(lái)保存環(huán)境

閉包共享相同的函數(shù)定義，但是保存了不同的詞法環(huán)境

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

點(diǎn)擊時(shí)文字會(huì)發(fā)生改變12、14、16

但是如果改變寫(xiě)法 ：

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

這樣寫(xiě)的話文字大小都是12，因?yàn)樗鼈児蚕砹送粋€(gè)詞法環(huán)境，第一個(gè)執(zhí)行后，后面和前面的是公用一個(gè)詞法環(huán)境

3）創(chuàng)建對(duì)象或類時(shí)使用閉包

在創(chuàng)建新的對(duì)象或者類時(shí)，方法通常應(yīng)該關(guān)聯(lián)于對(duì)象的原型，而不是定義到對(duì)象的構(gòu)造器中。原因是這將導(dǎo)致每次構(gòu)造器被調(diào)用時(shí)，方法都會(huì)被重新賦值一次（也就是，每個(gè)對(duì)象的創(chuàng)建）。

例如我們可以這樣寫(xiě)：

function MyObject(name, message) {
  this.name = name.toString();  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

二、原型

相關(guān)推薦：

js閉包使用詳解-js教程

具體介紹Javascript閉包深入解析及代碼實(shí)現(xiàn)方法

以上是js 閉包與原型的應(yīng)用代碼詳解的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！