JavaScript聲明變量的6種方法

1.var聲明變量

var x = 1; //全局變量
function def(){
  var x = 2; //局部變量
  console.log(x)
}
def() //2
console.log(x) //1

-var在方法中定義的變量是局部變量，在全局作用域定義的變量是全局變量，var存在變量提升。
-ES5之前沒有塊級(jí)作用域的概念，只能通過函數(shù)作用域來(lái)解決全局變量的問題。沒有塊級(jí)作用域?qū)е铝薸f和for塊級(jí)的問題，這也是JavaScript設(shè)計(jì)之初的缺陷。

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
    var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '個(gè)按鈕被點(diǎn)擊');
      })
    }
</script>

-全局作用域?qū)е曼c(diǎn)擊每一個(gè)按鈕的變量i都是5，因?yàn)閒or沒有塊級(jí)作用域，所以在給按鈕添加點(diǎn)擊事件的時(shí)候就把i循環(huán)了5次，而點(diǎn)擊事件是回調(diào)函數(shù)，因此每一個(gè)按鈕的變量i都一樣。

var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
  (function (i) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '個(gè)按鈕被點(diǎn)擊')
    })
  })(i)
}

-閉包就很好地解決了這個(gè)問題，閉包其實(shí)也是利用了作用域的概念，在每次定義函數(shù)的時(shí)候就執(zhí)行一次，不會(huì)出現(xiàn)全局作用域的問題。


2.let聲明變量

let不存在變量提升

-ES6 明確規(guī)定，如果區(qū)塊中存在let和const命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報(bào)錯(cuò)ReferenceError
let bar = 2;

let提供塊級(jí)作用域

-在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。這在語(yǔ)法上，稱為“暫時(shí)性死區(qū)”

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[6]();  //6

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n)
}
f1() //5

-let的暫時(shí)性死區(qū)也使得typeof不再是一個(gè)百分之百安全的操作

typeof x; // ReferenceError
let x;

-for循環(huán)有一個(gè)特別之處，設(shè)置循環(huán)變量的那部分是一個(gè)父作用域，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域。使用let也可以解決上面按鈕點(diǎn)擊事件的問題。

const btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function () {
  console.log('第' + i + '個(gè)按鈕被點(diǎn)擊')
  })
}

不允許重復(fù)聲明

let x = 1;
{
  var x = 2; // SyntaxError for re-declaration
}

-ES6 的塊級(jí)作用域必須有大括號(hào)，如果沒有大括號(hào)，JavaScript 引擎就認(rèn)為不存在塊級(jí)作用域。

// 第一種寫法，報(bào)錯(cuò)
if (true) let x = 1;

// 第二種寫法，不報(bào)錯(cuò)
if (true) {
  let x = 1;
}

3.const聲明變量

const聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變。
const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
const一旦聲明變量，就必須立即初始化
const foo;
// SyntaxError: Missing initializer in const declaration
const也具有塊級(jí)作用域

const實(shí)際上是保證變量指向的那個(gè)地址不能修改，而不是變量的值不能修改。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址。對(duì)于復(fù)合類型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針。

const obj = {
  name: 'abc',
  age: 18,
  height: 1.88
}
obj.age = 20;
obj.prop = 123;

// 將 obj 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
obj = {}; // TypeError: "obj" is read-only

4.function聲明變量

//ES5之前表達(dá)形式
function() {}
//ES6表達(dá)形式
() => {}

-ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面。

function log(x , y = "World"){
  console.log(x,y);
}
log('Hello'); //Hello World

5.import聲明變量

-ES6 模塊不是對(duì)象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入。

Module 語(yǔ)法是 JavaScript 模塊的標(biāo)準(zhǔn)寫法，使用import取代require 
import { func1, func2 } from 'moduleA';
導(dǎo)入導(dǎo)出時(shí)可以起別名
import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';
動(dòng)態(tài)導(dǎo)入也可以適用
(async () => {
  if (somethingIsTrue) {
    // import module for side effects
    await import('/modules/my-module.js');
  }
})();
導(dǎo)入文件實(shí)例
//test.html
<body>
  <script type="module">
    import {helloWorld,notUseUrl,add} from '../js/common.js'
    helloWorld()
    console.log(add(5,5))
    console.log(notUseUrl)
  </script>
</body>

//common.js
let notUseUrl = ['material/submateriallist']
const add = (a, b = 6) => a + b
export function helloWorld(){
  console.log("Hello World")
}
export {
  notUseUrl,
  add
};

-html腳本使用import必須將type設(shè)置為module，必須開啟服務(wù)器否則會(huì)發(fā)生跨域問題，沒有后臺(tái)服務(wù)器的同學(xué)可以安裝Live Server插件，右鍵開啟本地服務(wù)。


6.class聲明變量

-ES6 的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法。

ES5類的定義
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
ES6類的定義
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

typeof Point // "function"
Point === Point.prototype.constructor // true

-ES5 的構(gòu)造函數(shù)Point，對(duì)應(yīng) ES6 的Point類的構(gòu)造方法
-類的數(shù)據(jù)類型就是函數(shù)，類本身就指向構(gòu)造函數(shù)

類的實(shí)例
class Bar {
  doStuff() {
    console.log('stuff');
  }
}

var b = new Bar();
b.doStuff() // "stuff"
在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(diào)用原型上的方法
class B {}
let b = new B();

b.constructor === B.prototype.constructor // true
Object.assign方法可以很方便地一次向類添加多個(gè)方法
class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});
類的內(nèi)部所有定義的方法，都是不可枚舉的
class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容