本文實(shí)例分析了JS作用域閉包、預(yù)解釋和this關(guān)鍵字。分享給大家供大家參考，具體如下：

var number = 2;
var obj = {number : 5,
  fn1 : ( function() {
  this.number *= 2;
  number=number*2;
  var number=3;
    return function() {
      this.number *= 2;
      number*=3;
      alert(number);
    }
  } )()
};
var fn1 = obj.fn1;
alert(number);
fn1();
obj.fn1();
alert(window.number);
alert(obj.number);

【解析】

1. fn1本身后面就有()，所以var fn1 = obj.fn1;時(shí)他已經(jīng)被執(zhí)行，但是里面的return function并沒有被執(zhí)行

2. alert(number);輸出全局的number，本來是2，經(jīng)過var fn1 = obj.fn1;后，相當(dāng)于執(zhí)行了

this.number *= 2;
number=number*2;
var number=3;

這三句話

注意：任何一個(gè)直接執(zhí)行的匿名方法，他的this指向window

所以this.number *= 2;使得全局變量變成4，即輸出4

而number=number*2;他是去看作用域塊里的number，var number=3;作用域聲明在先，但是沒有賦值，所以number=number*2;這句話其實(shí)沒用

3. 執(zhí)行到fn1();就是執(zhí)行fn1里面的return function，也就是這三句話

this.number *= 2;
number*=3;
alert(number);

這時(shí)候依然是個(gè)匿名方法，所以this.number *= 2;使得全局變量變?yōu)?，number*=3;去找作用域塊里的number，外層定義number為3，所以alert(number);就是9，如果是alert(this.number);則指向全局變量，即輸出8

4. obj.fn1();，依然執(zhí)行fn1里面的return function，也就是這三句話

this.number *= 2;
number*=3;
alert(number);

但這時(shí)this指向obj，this.number *= 2;使得obj里的number變?yōu)?0，number*=3;還是去找作用域塊，由于上面變?yōu)?，所以這里就是27，alert(number);輸出的是作用域塊的number，即27，如果是alert(this.number);則指向obj的number，即輸出10

5. alert(window.number);經(jīng)過上面幾輪，全局變量變?yōu)?(即執(zhí)行obj.fn1();對(duì)全局變量無影響)

6. alert(obj.number);只有這句話obj.fn1();，改變了obj.number，所以輸出10

(function(){
   var a=10;
  fn();
  function fn(){
    var a=a+10;
    console.log(a);
     return a;
  }
  console.log(a);
  console.log(fn()+10);
})();

fn函數(shù)里的a先被聲明但是沒有賦值，然后進(jìn)行運(yùn)算，他不會(huì)去找函數(shù)外面的同名變量，因?yàn)樗呀?jīng)在里面被聲明了。一個(gè)不是數(shù)字的和數(shù)字進(jìn)行運(yùn)算，輸出NaN

console.log(fn()+10);這句話要輸出兩個(gè)值：console.log(fn());和console.log(fn()+10);

結(jié)果：

NaN
10
NaN
NaN

如果題目改成

(function(){
  var a=10;
  fn();
  function fn(){
    a=a+10;
    console.log(a);
    return a;
  }
  console.log(a);
  console.log(fn()+10);
})();

結(jié)果：

20

20

30

40

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論