Rumah > hujung hadapan web > tutorial js > javascript声明变量的4种方法是什么

javascript声明变量的4种方法是什么

青灯夜游
Lepaskan: 2023-01-04 09:34:02
asal
12161 orang telah melayarinya

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
Salin selepas log masuk

这种方法是利用 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
Salin selepas log masuk

第二种方法我是利用

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
Salin selepas log masuk

首先是先声明来一个变量 b 并进行初识化,初始化的值为 a + 1(a 的值是多少?) <br/> 然后紧接是声明了一个变量 a ,初识化为 1 <br/> 这是代码表面上就是做着这些事,实际上做的事情是这样:

  • 在每次声明一个变量的时候,他们的声明都是放在代码的最上面,并且他们都是要进行一次初始化,值为:undefined,但是赋值的位置是不会改变,
  • 然后再进行其他的操作

下面写法同样可以实现一样的效果

var b;
var a;

b = a +1; // b: NaN 
a = 1; // a: 1
Salin selepas log masuk

let 和 const 则与 var 的表现则不同

例子二,验证 let 是否存在变量提升:

let b = a + 1; // Uncaught ReferenceError: a is not defined
let a = 1;
Salin selepas log masuk

在运行的时候直接抛出范围错误,若这样改一下,就没有错误:

let a = 1; // a: 1
let b = a + 1; // b: 2
Salin selepas log masuk

const 和 let在变量提升方面的表现是一致


重复声明

  • var 能重复声明,后者覆盖前者
  • let 和 const 则不能重复声明

    例子一,验证 var 的重复声明:

    var a = 1;
    var a = 2;
    var b = a + 1; // 3
    Salin selepas log masuk
    • 首先是声明变量 a ,初始化为1
    • 紧接再次声明变量 a, 初始化为2
    • 最后声明变量 b , 它初始化值是 a + 1

    例子二,验证 let 的重复声明:

    let a = 1;
    let a = 2; // Uncaught SyntaxError: Identifier &#39;a&#39; has already been declared
    Salin selepas log masuk
    var a = 1;
    let a = 2; //Uncaught SyntaxError: Identifier &#39;a&#39; has already been declared
    Salin selepas log masuk
    • 很显然在同一个执行环境中使用 let 进行声明的变量是不能重复声明,否则会抛出错误 <br/> const 和 let 在重复声明方面的表现是一致

作用域的范围

  • var 的作用域是以函数为界限
  • let 和 const 是块作用域
  • var 可以定义全局变量和局部变量,let 和 const 只能定义局部变量

封装一个阶乘函数来举例,没有使用尾递归,就是使用 for 和 if 的搭配实现 <br/> 例子一,阶乘函数验证作用域域范围:

  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
Salin selepas log masuk

const 和 let 在作用域的范围的表现也是一样

例子二,验证 const 的作用域:

  {
    const NUM_1 = 10;
  }

  let b = NUM_1 + 1;  // Uncaught ReferenceError: NUM_1 is not defined
Salin selepas log masuk

例子三,验证 var 可以定义全局变量,let 和 const 只能定义局部变量

  // 可以挂载到全局作用域上
  // var name = &#39;window scoped&#39;;

  let name = &#39;let scoped&#39;; //是不挂载到全局作用域中

  let obj = {
    name: &#39;myName&#39;,
    sayName () {

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

  obj.sayName()();
  console.log(window); //name 这个属性的值没有,如下图
Salin selepas log masuk

这里写图片描述

若这样改一下就可以得到我们想要的值:

  • 把用 var 定义的 name 的代码取消注释,把用 let 定义的 name 的代码注释。

这个同时也涉及到新问题 this 的指向。后面的文章再详细举例验证


const 的特殊之处

const 与 let , var 其实还是有些地方不一样的

例子1:验证 const 的特殊之处(一)<br/>

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

但是也有例外

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

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

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

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

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

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

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

Atas ialah kandungan terperinci javascript声明变量的4种方法是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan