javascript聲明變量的方法有哪些

這篇文章將為大家詳細講解有關javascript聲明變量的方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript聲明變量的4種方法：1、使用“var”聲明變量，例“var a;”；2、使用“function”聲明變量，例“function Fun (num) {}”；3、使用“let”聲明變量；4、使用“const”聲明變量。

聲明變量的方式

JavaScript 變量聲明的方式有下面幾種：

• ES6之前是 var 和 function

• ES6中新增 let 和 const

function 是一種聲明變量的方式？

我們來驗證一下

驗證方法一：

    function repeatFun (num) {
      return num;
    }

    repeatFun(10); // 10

    var repeatFun = 1;

    repeatFun(2); // Uncaught TypeError: repeatFun is not a function

這種方法是利用 var可以重復聲明變量，但是會后者覆蓋會覆蓋前者的特點

我們來看看這里發生來什么事：

• 首先是聲明了一個函數，他的名字是 repeatFun

• 緊接調用一次，得到結果為10

• 之后用 var 又聲明了一次 repeatFun , 并初始化為 1

• 最后調用一次 repeatFun 這個函數

• 結果就是報錯 ，內容： repeatFun 不是一個函數

根據執行結果我們可以推斷出在瀏覽器的內存中存在一個 repeatFun 變量，之前是一個函數，后來被一個 var 關鍵字重新聲明并初識化為 1。

驗證方法二：

    {
      let repeatFun = 1;
      function repeatFun (num) {
        return num
      }
    }
    // Uncaught SyntaxError: Identifier 'repeatFun' has already been declared

第二種方法我是利用

ES6的一個語法：利用 let 不能重復聲明的特性來證明 function 也是一種聲明變量的方式

var ，let ， const 的不同點：

• 變量聲明提升

• var 有變量聲明提升的功能，可以先使用然后再聲明，反之也成立

• let 和 const 則沒有變量聲明提升的功能，必須要先聲明才能使用

• 重復聲明

• var 能重復聲明，后者覆蓋前者

• let 和 const 則不能重復聲明

• 作用域的范圍

• var 的作用域是以函數為界限

• let 和 const 是塊作用域

• var 可以定義全局變量和局部變量，let 和 const 只能定義局部變量

• const 的特殊之處

• 聲明之后不能被修改（引用類型和基本類型的表現有些地方不一樣）

變量聲明提升

• var 是有變量聲明提升的功能，可以先使用然后再聲明

• let 和 const 則沒有變量聲明提升的功能，必須要先聲明才能使用

例子一，驗證 var 變量提升：

var b = a + 1; // b： NaN 
var a = 1; // a： 1

首先是先聲明來一個變量 b 并進行初識化，初始化的值為 a + 1（a 的值是多少？）
然后緊接是聲明了一個變量 a ,初識化為 1
這是代碼表面上就是做著這些事，實際上做的事情是這樣：

• 在每次聲明一個變量的時候，他們的聲明都是放在代碼的最上面，并且他們都是要進行一次初始化，值為：undefined，但是賦值的位置是不會改變，

• 然后再進行其他的操作

下面寫法同樣可以實現一樣的效果

var b;
var a;

b = a +1; // b： NaN 
a = 1; // a： 1

let 和 const 則與 var 的表現則不同

例子二，驗證 let 是否存在變量提升：

let b = a + 1; // Uncaught ReferenceError: a is not defined
let a = 1;

在運行的時候直接拋出范圍錯誤，若這樣改一下，就沒有錯誤：

let a = 1; // a： 1
let b = a + 1; // b： 2

const 和 let在變量提升方面的表現是一致

重復聲明

• var 能重復聲明，后者覆蓋前者

• let 和 const 則不能重復聲明

  例子一，驗證 var 的重復聲明：

  var a = 1;
  var a = 2;
  var b = a + 1; // 3

  例子二，驗證 let 的重復聲明：

  let a = 1;
  let a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared

  var a = 1;
  let a = 2; //Uncaught SyntaxError: Identifier 'a' has already been declared

• 很顯然在同一個執行環境中使用 let 進行聲明的變量是不能重復聲明，否則會拋出錯誤
  const 和 let 在重復聲明方面的表現是一致

• 首先是聲明變量 a ，初始化為1

• 緊接再次聲明變量 a, 初始化為2

• 最后聲明變量 b , 它初始化值是 a + 1

作用域的范圍

• var 的作用域是以函數為界限

• let 和 const 是塊作用域

• var 可以定義全局變量和局部變量，let 和 const 只能定義局部變量

封裝一個階乘函數來舉例，沒有使用尾遞歸，就是使用 for 和 if 的搭配實現
例子一，階乘函數驗證作用域域范圍：

  var num = 5;

  function factorial(num) {

      var result = 1，resultValue = 0;

      for (let i = num - 1; i >= 1; i--) {

        if (i === num - 1) {
          resultValue = num * i;
        }else{
          resultValue = num * i / num;
        }

        result *= resultValue;
      }

      // i 是用 let 進行定義它的作用域僅僅被限制在 for 循環的區域內
      // i++;// Uncaught ReferenceError: i is not defined

      return result;
  }

  // result 是用 var 進行定義，他的活動區域在 factorial 函數內
  // result++; // var的作用域.html:34 Uncaught ReferenceError: result is not defined

  factorial(num); // 120

const 和 let 在作用域的范圍的表現也是一樣

例子二，驗證 const 的作用域：

  {
    const NUM_1 = 10;
  }

  let b = NUM_1 + 1;  // Uncaught ReferenceError: NUM_1 is not defined

例子三，驗證 var 可以定義全局變量，let 和 const 只能定義局部變量

  // 可以掛載到全局作用域上
  // var name = 'window scoped';

  let name = 'let scoped'; //是不掛載到全局作用域中

  let obj = {
    name: 'myName',
    sayName () {

       return function () {
        console.log(this.name); // 打印出來為空
      };
    }
  }

  obj.sayName()();
  console.log(window); //name 這個屬性的值沒有，如下圖

若這樣改一下就可以得到我們想要的值：

• 把用 var 定義的 name 的代碼取消注釋，把用 let 定義的 name 的代碼注釋。

這個同時也涉及到新問題 this 的指向。后面的文章再詳細舉例驗證

const 的特殊之處

const 與 let , var 其實還是有些地方不一樣的

例子1：驗證 const 的特殊之處（一）


const NUM = 100; 
 NUM = 1000; // Uncaught TypeError: Assignment to constant variable

• 經過 const 方式進行聲明，之后賦值完畢，則不可以進行改變，否則會報錯

但是也有例外

例子二：驗證 const 的特殊之處（二）

  const obj = {
    name: 'xiaoMing',
    sayName () {
      return this.name
    }
  };
  obj.sayName(); // xiaoMing

  obj.name = 'xiaoHong';
  obj.sayName(); // xiaoHong

• 使用 const 首先聲明一個變量 obj , 并且這個變量指向我們在內存中創建的對象，你會發現我們改變里面的屬性是沒有任何問題

若這樣改一下：
例子三：驗證 const 的特殊之處（三）

  const obj = {
    name:'xiaoMing',
    sayName(){
      return this.name
    }
  };

  obj = {}; // Uncaught TypeError: Assignment to constant variable

• 若改變該變量的指向的對象，則就會報錯。這種錯誤和 「 驗證 const 的特殊之處（一）」的錯誤是一樣的

關于“javascript聲明變量的方法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。