JavaScript聲明變量詳解

paulquei 發(fā)布于2019-08-26 13:39 / 1725人閱讀

摘要：命令用于規(guī)定模塊的對外接口，命令用于輸入其他模塊提供的功能所以在一定程度上來說，也具有聲明變量的功能。當(dāng)沒有聲明，直接給變量賦值時，會隱式地給變量聲明，此時這個變量作為全局變量存在。

前言

如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過

在ES5階段，JavaScript 使用 var 和 function 來聲明變量， ES6 中又添加了let、const、import、 Class 這幾種聲明變量的方式。那么，他們各自都有什么樣的特點呢？

下面，就讓我們一起去探究一下吧

以下↓

變量就是存儲信息的容器。 ECMAScript 的變量是松散類型的，所謂松散類型就是可以用來保存任何類型的數(shù)據(jù)

var 聲明

一直以來，我們都是使用var關(guān)鍵字來聲明變量

var a = 1;
var b;

console.log(a) // 1
console.log(b) // undefined
console.log(c) // undefined

var b = 2;
var c = 3;
console.log(b) // 2
console.log(c) // 3

function f() {
    var c = 4;
    console.log(c) // 4
    c = 5;
    console.log(c) // 5
}
f();
console.log(c) // 3

function fun() {
    c = 6
}
fun();
console.log(c) // 6

從上面的結(jié)果我們不難看出，使用var聲明的變量具有以下特點：

變量可以沒有初始值，會保存一個特殊的值 undefined

變量可以重復(fù)定義，且可以修改值

變量聲明語句從自動提升到所在作用域的頂端

函數(shù)內(nèi)重復(fù)定義對函數(shù)外無影響(局部變量)

函數(shù)內(nèi)重新賦值對函數(shù)外有影響

function 關(guān)鍵字聲明

在ES5中，除了使用var聲明變量，我們也可以使用 function 關(guān)鍵字聲明變量

f();
function f() {console.log(1)}
var f;

console.log(f) // function f

特點：

使用 function 聲明的是函數(shù)對象，也存在聲明提升

函數(shù)聲明要優(yōu)于變量聲明

let聲明

由于 ES5 中使用 var 聲明變量存在著一些很讓人迷惑的特性（比如變量提升，重復(fù)定義等），ES6 中新增 let 命令，用來聲明變量。它的用法類似于 var ，但是所聲明的變量，只在 let 命令所在的代碼塊內(nèi)有效

{
    var a = 1;
    let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined

console.log(c) // Uncaught ReferenceError: c is not defined

let c = 3

let a = 4

console.log(a) // Identifier "a" has already been declared

通過以上的代碼，我們很容易發(fā)現(xiàn)使用 let 聲明變量的特點：

let聲明的變量只在它所在的代碼塊有效

不存在變量提升

不可以重復(fù)聲明

由于 let 聲明變量的這些特點，所以 for 循環(huán)的計數(shù)器，就很合適使用 let 命令

for(let i = 0; i < 10; i++) {
    //
}

console.log(i) // Uncaught ReferenceError: c is not defined

// 如果使用var聲明，則在這里輸出的就是10

let 實際上為 JavaScript 新增了塊級作用域

const聲明

const 也是 ES6 新增的聲明變量的方式，const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變

const API;

console.log(API) // SyntaxError: Missing initializer in const declaration

console.log(MAX); // Uncaught ReferenceError: MAX is not defined
const MAX = 1;

const MAX = 2;

console.log(MAX); // Identifier "MAX" has already been declared

const PI = 3.1415;

console.log(PI) // 3.1415

PI = 3; // TypeError: Assignment to constant variable.

const f = {}
f.name = "HELLO" // 正常執(zhí)行

f = {name: "World"} // 報錯

所以，使用 const 聲明的變量具有以下特點：

const 一旦聲明變量，就必須立即初始化，不能留到以后賦值

不允許重復(fù)聲明

不存在變量提升

const 實際上保證的，并不是變量的值不得改動，而是變量指向的那個內(nèi)存地址不得改動

如果真的想將對象凍結(jié)，應(yīng)該使用 Object.freeze 方法

import 聲明

ES6 新增的模塊的概念。

模塊功能主要由兩個命令構(gòu)成：export 和 import。 export 命令用于規(guī)定模塊的對外接口，import 命令用于輸入其他模塊提供的功能

所以在一定程度上來說，import 也具有聲明變量的功能。只是在使用 import 的時候，具有一些限制

export { first, last } 

import { first, last } from "./xxx"

first = {} // Syntax Error : "a" is read-only;

first.name = "Hello" // 成功執(zhí)行，但是不建議這樣使用

export default function(){} // a.js

import xxx from "a.js"

import { New as $ } from "./xxx"

特點：

import 命令接受一對大括號，大括號里面的變量名，必須與被導(dǎo)入模塊對外接口的名稱相同

import 命令輸入的變量都是只讀的，因為它的本質(zhì)是輸入接口

當(dāng)使用 export default 命令，為模塊指定默認(rèn)輸出的時候，import 命令可以為該匿名函數(shù)指定任意名字

import 命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行

如果想為輸入的變量重新取一個名字，import 命令要使用 as 關(guān)鍵字，將輸入的變量重命名

本質(zhì)上，export default 就是輸出一個叫做 default 的變量或方法，然后系統(tǒng)允許你為它取任意名字

class 聲明

ES6 引入了類的概念，有了 class 這個關(guān)鍵字，作為對象的模板。通過 class 關(guān)鍵字，可以定義類

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

ES6 的 class 可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，類的實質(zhì)還是函數(shù)對象，類中的方法和對象其實都是掛在對應(yīng)的函數(shù)對象的 prototype 屬性下

所以就可以改寫成下面這種ES5的方式

function Point(x, y) {
    this.x = x;
    this.y = y;
}

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

特點：

所有類都有 constructor 函數(shù)，如果沒有顯式定義，一個空的 constructor 方法會被默認(rèn)添加。當(dāng)然所有函數(shù)對象都必須有個主體

生成類的實例對象的寫法，與 ES5 通過構(gòu)造函數(shù)生成對象完全一樣，也是使用 new 命令

class B {}

let b = new B();

在類的實例上面調(diào)用方法，其實就是調(diào)用原型上的方法

與函數(shù)對象一樣，Class 也可以使用表達式的形式定義

Class 其實就是一個 function ，但是有一點不同，Class 不存在變量提升，也就是說 Class 聲明定義必須在使用之前

全局變量

在瀏覽器環(huán)境指的是 window 對象，在 Node 指的是 global 對象。ES5 之中，頂層對象的屬性與全局變量是等價的var 命令和 function 命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規(guī)定，let 命令、const 命令、class 命令聲明的全局變量，不屬于頂層對象的屬性。也就是說，從 ES6 開始，全局變量將逐步與頂層對象的屬性脫鉤

var a = 1;

window.a // 1

let b = 2;

window.b // undefined

隱式聲明

在 JavaScript 中還存在著隱式聲明。

a = 1;
console.log(a) // 1

當(dāng)沒有聲明，直接給變量賦值時，會隱式地給變量聲明，此時這個變量作為全局變量存在。這個時候就不存在聲明提前的問題了

最后

其實只要我們理解并掌握了這幾種聲明變量的方式，記住它們的特點，那么在實際使用的過程當(dāng)中就很容易能夠找到最合適的方式去定義

每天學(xué)習(xí)分享，不定期更新

最后，推薦一波前端學(xué)習(xí)歷程，這段時間總結(jié)的一些面試相關(guān)，分享給有需要的小伙伴，歡迎 star 關(guān)注傳送門

參考文檔

ECMAScript 6入門

ES6變量聲明

云服務(wù)器 GPU云服務(wù)器聲明變量 python變量聲明 Ruby變量聲明 asp變量聲明

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109258.html

發(fā)表評論

登陸后可評論

0條評論

paulquei

男|高級講師

我要關(guān)注我要私信

TA的文章

Skywalking IoTDB存儲插件設(shè)計說明

閱讀 2338·2021-09-30 09:47
2019年4月所遇知識點整理

閱讀 2955·2019-08-30 11:05
css實現(xiàn)單行、多行文本超出顯示省略號

閱讀 2532·2019-08-29 17:20
CSS入門指南-3：定位元素

閱讀 1919·2019-08-29 13:01
JavaScript聲明變量詳解

閱讀 1726·2019-08-26 13:39
SVG vs Image, SVG vs Iconfont

閱讀 1240·2019-08-26 13:26
fc-whiteboard，支持鏡像、錄播、回放的 Web 電子白板

閱讀 3209·2019-08-23 18:40
Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

閱讀 1823·2019-08-23 17:09

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript聲明變量詳解

相關(guān)文章

Javascript變量作用域詳解

javascript 聲明變量var、let、const詳解及示例

ES6 變量作用域與提升：變量的生命周期詳解

**淺談JavaScript代碼預(yù)解析 + 示例詳解**

詳解js變量聲明提升

發(fā)表評論

0條評論

paulquei

男|高級講師

TA的文章

Skywalking IoTDB存儲插件設(shè)計說明

2019年4月所遇知識點整理

css實現(xiàn)單行、多行文本超出顯示省略號

CSS入門指南-3：定位元素

JavaScript聲明變量詳解

SVG vs Image, SVG vs Iconfont

fc-whiteboard，支持鏡像、錄播、回放的 Web 電子白板

Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

最新活動