首頁 > web前端 > js教程 > javascript宣告變數的4種方法是什麼

javascript宣告變數的4種方法是什麼

青灯夜游
發布: 2023-01-04 09:34:02
原創
12098 人瀏覽過

javascript宣告變數的4種方法:1、使用「var」宣告變量,例「var a;」;2、使用「function」宣告變數,例「function Fun (num) {}」; 3、使用「let」宣告變數;4、使用「const」宣告變數。

javascript宣告變數的4種方法是什麼

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

宣告變數的方式

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
    登入後複製

    首先是宣告變數a ,初始化為1

    緊接著再次宣告變數a, 初始化為2
    • 最後宣告變數b , 它初始化值是a 1
    • 範例二,驗證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 在重複宣告方面的表現是一致


    作用域的範圍

#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 的特殊之处(一)<br/>

const NUM = 100; 
 NUM = 1000; // Uncaught TypeError: Assignment to constant variable
登入後複製
  • 经过 const 方式进行声明,之后赋值完毕,则不可以进行改变,否则会报错

但是也有例外

例子二:验证 const 的特殊之处(二)

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

  obj.name = &#39;xiaoHong&#39;;
  obj.sayName(); // xiaoHong
登入後複製
  • 使用 const 首先声明一个变量 obj , 并且这个变量指向我们在内存中创建的对象,你会发现我们改变里面的属性是没有任何问题

若这样改一下: <br/> 例子三:验证 const 的特殊之处(三)

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

  obj = {}; // Uncaught TypeError: Assignment to constant variable
登入後複製
  • 若改变该变量的指向的对象,则就会报错。这种错误和 「 验证 const 的特殊之处(一)」的错误是一样的

更多编程相关知识,请访问:编程视频!!

以上是javascript宣告變數的4種方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板