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基础-类变量和实例变量
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Inside Larry's and Sergey's Brain
Richard Brandt / Portfolio / 17 Sep 2009 / USD 24.95
You’ve used their products. You’ve heard about their skyrocketing wealth and “don’t be evil” business motto. But how much do you really know about Google’s founders, Larry Page and Sergey Brin? Inside......一起来看看 《Inside Larry's and Sergey's Brain》 这本书的介绍吧!