JavaScript声明变量详解
栏目: JavaScript · 发布时间: 5年前
内容简介:如果文章中有出现纰漏、错误之处,还请看到的小伙伴多多指教,先行谢过在下面,就让我们一起去探究一下吧
如果文章中有出现纰漏、错误之处,还请看到的小伙伴多多指教,先行谢过
在 ES5
阶段, JavaScript
使用 var
和 function
来声明变量, ES6
中又添加了 let
、 const
、 import
、 Class
这几种声明变量的方式。那么,他们各自都有什么样的特点呢?
下面,就让我们一起去探究一下吧
以下↓
变量就是存储信息的容器。 ECMAScript
的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据
var 声明
一直以来,我们都是使用var关键字来声明变量
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 复制代码
从上面的结果我们不难看出,使用var声明的变量具有以下特点:
undefined
function 关键字声明
在ES5中,除了使用var声明变量,我们也可以使用 function
关键字声明变量
f(); function f() {console.log(1)} var f; console.log(f) // function f 复制代码
特点:
function
let声明
由于 ES5
中使用 var
声明变量存在着一些很让人迷惑的特性(比如变量提升,重复定义等), ES6
中新增 let
命令,用来声明变量。它的用法类似于 var
,但是所声明的变量,只在 let
命令所在的代码块内有效
{ 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 复制代码
通过以上的代码,我们很容易发现使用 let
声明变量的特点:
- let声明的变量只在它所在的代码块有效
- 不存在变量提升
- 不可以重复声明
由于 let
声明变量的这些特点,所以 for
循环的计数器,就很合适使用 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' // 正常执行 f = {name: 'World'} // 报错 复制代码
所以,使用 const
声明的变量具有以下特点:
const const
如果真的想将对象冻结,应该使用 Object.freeze
方法
import 声明
ES6
新增的模块的概念。
模块功能主要由两个命令构成: export
和 import
。 export
命令用于规定模块的对外接口, import
命令用于输入其他模块提供的功能
所以在一定程度上来说, import
也具有声明变量的功能。只是在使用 import
的时候,具有一些限制
export { first, last } import { first, last } from './xxx' first = {} // Syntax Error : 'a' is read-only; first.name = 'Hello' // 成功执行,但是不建议这样使用 export default function(){} // a.js import xxx from 'a.js' import { New as $ } from './xxx' 复制代码
特点:
-
import
命令接受一对大括号,大括号里面的变量名,必须与被导入模块对外接口的名称相同 -
import
命令输入的变量都是只读的,因为它的本质是输入接口 -
当使用
export default
命令,为模块指定默认输出的时候,import
命令可以为该匿名函数指定任意名字 -
import
命令具有提升效果,会提升到整个模块的头部,首先执行 -
如果想为输入的变量重新取一个名字,
import
命令要使用as
关键字,将输入的变量重命名
本质上, export default
就是输出一个叫做 default
的变量或方法,然后系统允许你为它取任意名字
class 声明
ES6
引入了类的概念,有了 class
这个关键字,作为对象的模板。通过 class
关键字,可以定义类
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 复制代码
ES6
的 class
可以看作只是一个语法糖,它的绝大部分功能, ES5
都可以做到,类的实质还是函数对象,类中的方法和对象其实都是挂在对应的函数对象的 prototype
属性下
所以就可以改写成下面这种ES5的方式
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '(' + this.x + ', ' + this.y + ')'; } 复制代码
特点:
-
所有类都有
constructor
函数,如果没有显式定义,一个空的constructor
方法会被默认添加。当然所有函数对象都必须有个主体 -
生成类的实例对象的写法,与
ES5
通过构造函数生成对象完全一样,也是使用new
命令
class B {} let b = new B(); 复制代码
- 在类的实例上面调用方法,其实就是调用原型上的方法
-
与函数对象一样,
Class
也可以使用表达式的形式定义 -
Class
其实就是一个function
,但是有一点不同,Class
不存在变量提升,也就是说Class
声明定义必须在使用之前
全局变量
在浏览器环境指的是 window
对象,在 Node
指的是 global
对象。 ES5
之中,顶层对象的属性与全局变量是等价的
var
命令和 function
命令声明的全局变量,依旧是顶层对象的属性;另一方面规定, let
命令、 const
命令、 class
命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6
开始,全局变量将逐步与顶层对象的属性脱钩
var a = 1; window.a // 1 let b = 2; window.b // undefined 复制代码
隐式声明
在 JavaScript
中还存在着隐式声明。
a = 1; console.log(a) // 1 复制代码
当没有声明,直接给变量赋值时,会隐式地给变量声明,此时这个变量作为全局变量存在。这个时候就不存在声明提前的问题了
最后
其实只要我们理解并掌握了这几种声明变量的方式,记住它们的特点,那么在实际使用的过程当中就很容易能够找到最合适的方式去定义
每天学习分享,不定期更新
最后,推荐一波前端学习历程,这段时间总结的一些面试相关,分享给有需要的小伙伴,欢迎 star
关注 传送门
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- JVM详解之:汇编角度理解本地变量的生命周期
- Python 变量详解[学习 Python 必备基础知识][看此一篇就够了]
- Golang常见错误之值拷贝和for循环中的单一变量详解
- 全局变量,静态全局变量,局部变量,静态局部变量
- python变量与变量作用域
- Python基础-类变量和实例变量
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java 8实战
厄马(Raoul-Gabriel Urma)、弗斯科(Mario Fusco)、米克罗夫特(Alan Mycroft) / 陆明刚、劳佳 / 人民邮电出版社 / 2016-4-1 / CNY 79.00
本书全面介绍了Java 8 这个里程碑版本的新特性,包括Lambdas、流和函数式编程。有了函数式的编程特性,可以让代码更简洁,同时也能自动化地利用多核硬件。全书分四个部分:基础知识、函数式数据处理、高效Java 8 编程和超越Java 8,清晰明了地向读者展现了一幅Java 与时俱进的现代化画卷。一起来看看 《Java 8实战》 这本书的介绍吧!