js 作用域和變量詳解

更新時間：2017年02月16日 15:35:20 作者：summer_88

本文主要介紹了js 的作用域和變量的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧

一、說起變量的提升呢，首先我們先看一段簡單的代碼

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v = 'hello world';
  alert(v);
 </script>
</body>
</html>

以上代碼執(zhí)行的結果是hello world

然后在看一段代碼：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
  })();
 </script>
</body>
</html>

執(zhí)行的結果和第一段代碼一樣hello world

好了，接下來在看這段代碼：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
   var v='I love you';
   alert(v);
  })();
 </script>
</body>
</html>

以上代碼執(zhí)行的結果：第一個彈出的是undefined；第二個結果是I love you。為什么會有這樣的結果呢？

這就跟剛開始提到的變量提升有關系哦~~~下面我們來做下總結：

最后一段代碼展現(xiàn)了2個知識點：

1、變量提升

2、作用域鏈

首先來說作用域鏈，js訪問一個變量時會優(yōu)先在該作用域內(nèi)（訪問時的那個作用域）尋找是否聲明過這個變量，如果該變量已經(jīng)存在，則直接使用它的值，否則會尋找該作用域的‘父作用域/上級作用域'，依次類推，直到找到全局作用域為止。

關于變量提升是指：js在解析的時候總是會將var，function這類關鍵詞的聲明語句提升至作用域的最頂部（注意：這里只會提升聲明的部分，賦值不會被提升）

所以，由此看來，上述的那段代碼就等于：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function () {
   var v; //先將該作用域下的變量提升，但沒有賦值
   alert(v); //所以此時是undefined
   var v='I love you';
   alert(v); //I love you
  })();
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: