ES6的变量声明

在ES5中,变量声明只有var和function以及隐式声明三种,在ES6中则增加了let,const,import和class四种,以下来介绍着七种变量的声明。

var


ES5中最原始的变量声明,用于声明变量,其实JavaScript是弱类型语言,对数据类型变量要求不太严格,所以不必声明每一个变量的类型(这就是下面说的隐式声明,当然这并不是一个好习惯),在使用变量之前先进行声明是一种好的习惯。

1.作用域

使用var声明的变量的作用域是函数作用域(在ES5时代,只有函数作用域和全局作用域两种作用域),在一个函数内用var声明的变量,则只在这个函数内有效。

function test(){
    var a;
    console.log(a);//undefined
}
console.log(a);//ReferenceError: a is not defined    

2.变量声明提升

用var声明变量时,只要在一个函数作用域内,无论在什么地方声明变量,都会把变量的声明提升到函数作用域的最前头,所以无论使用变量在变量声明前还是声明后,都不会报错(当然只是声明提前,赋值并没有提前,所以如果使用在声明之前,会输出undefined,但不会报错)。

function test(){
    console.log(a);//undefined
    var a=3;
}

隐式声明


当没有声明,直接给变量赋值时,会隐式地给变量声明,此时这个变量作为全局变量存在。

function test(){
    a=3;
    console.log(a);//3
}
test();
console.log(a);//3

当然要注意,隐式声明的话就没有变量声明提前的功能了,所以下面的使用是会报错的。

function test(){
    console.log(a);//ReferenceError: a is not defined
    a=3;
}

function


用function声明的是函数对象,作用域与var一样,是函数作用域。

function test(){
    function a(){
        console.log('d');
    }
    a();//'d'
}
a();//ReferenceError: a is not defined

同样,function声明也有变量声明提升,下面是两个特殊的例子:

function hello1(a){
    console.log(a); //[Function: a]
    function a(){}
    console.log(a);//[Function: a]
}
hello1('test');   

function hello2(a){
    console.log(a); //test
    var a=3;
    console.log(a);//3
}
hello2('test');   

这里有涉及到函数中形参的声明,我们可以将以上两个例子看成:

function hello1(a){
    var a='test;
    console.log(a); //[Function: a]
    function a(){}
    console.log(a);//[Function: a]
}
hello1('test');   

function hello2(a){
    var a='test;
    console.log(a); //test
    var a=3;
    console.log(a);//3
}
hello2('test');   

可以看到函数对象的声明也提前了,但是在形参变量声明之后(形参的变量声明在所有声明之前)。

当函数对象和普通对象同时声明时,函数对象的声明提前在普通对象之后。

function test(){    
    console.log(a);//[Function: a]
    function a(){}
    var a;
    console.log(a);//[Function: a]
} 

let


ES6新增的声明变量的关键字,与var类似。

当然,与var也有很大区别:

1.作用域不同

let声明的变量的作用域是块级作用域(之前的js并没有块级作用域,只有函数作用域和全局作用域),var声明的变量的作用域是函数作用域。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1 

2.不存在变量声明提升

用var声明变量时,只要在一个函数作用域内,无论在什么地方声明变量,都会把变量的声明提升到函数作用域的最前头,所以无论使用变量在变量声明前还是声明后,都不会报错。而let不一样,与java以及其他语言一样,let声明的变量,在未声明之前变量是不存在的。(js的语法越来越向java靠拢)

console.log(a); // undefined,但是不报错。
console.log(b); // ReferenceError: b is not defined.

var a = 2;
let b = 2;  

注意:在使用babel时可能会遇到这样的情况:

console.log(b); //undefined
let b = 2;    

babel在翻译es6时,似乎直接将let变为了var,所以运行时也有变量声明提升了,但是在Chrome下运行时是正确的。

3.暂时性死区

所谓暂时性死区,意思是,在一个块级作用域中,变量唯一存在,一旦在块级作用域中用let声明了一个变量,那么这个变量就唯一属于这个块级作用域,不受外部变量的影响,如下面所示。

无论在块中的任何地方声明了一个变量,那么在这个块级作用域中,任何使用这个名字的变量都是指这个变量,无论外部是否有其他同名的全局变量。

暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

暂时性死区的意义也是让我们标准化代码,将所有变量的声明放在作用域的最开始。

var a = 123;  
{
 console.log(a);//ReferenceError
 let a;
}

4.不允许重复声明

在相同的作用域内,用let声明变量时,只允许声明一遍。 (var是可以多次声明的)

// 正确
function () {
  var a = 10;
  var a = 1;
}
 
// 报错,Duplicate declaration "a"
function () {
  let a = 10;
  var a = 1;
}

// 报错,Duplicate declaration "a"
function () {
  let a = 10;
  let a = 1;
}

const


const用来声明常量,const声明的常量是不允许改变的,只读属性,这意味常量声明时必须同时赋值, 只声明不赋值,就会报错,通常常量以大写字母命名。

阮一峰大神的书里说,在严格模式下,重新给常量赋值会报错,普通模式下不报错,但是赋值无效。但是测试了一下,无论是严格还是非严格模式,都会报错。

const A = 1;
A = 3;// TypeError: "A" is read-only

const和let类似,也是支持块级作用域,不支持变量提升,有暂时性死区.

注意:如果声明的常量是一个对象,那么对于对象本身是不允许重新赋值的,但是对于对象的属性是可以赋值的。

const foo = {};
foo.prop = 123;

foo.prop// 123

foo = {} // TypeError: "foo" is read-only

import


ES6采用import来代替node等的require来导入模块。

import {$} from './jquery.js'  

$对象就是jquery中export暴露的对象。

import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。注意:大括号里面的变量名,必须与被导入模块对外接口的名称相同。

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

import { New as $ } from './jquery.js';

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。

class


ES6引入了类的概念,有了class这个关键字,当然,类只是基于原型的面向对象模式的语法糖,为了方便理解和开发而已,类的实质还是函数对象,类中的方法和对象其实都是挂在对应的函数对象的prototype属性下。

我们定义一个类:

//定义类
class Person {
  constructor(name, age) {
        this.name = name;
        this.age = age;
  }    
  setSex(_sex) {
        this.sex=_sex;
  }
}  

constructor方法,就是构造方法,也就是ES5时代函数对象的主体,而this关键字则代表实例对象,将上述类改写成ES5格式就是:

function Person(name, age){
        this.name = name;
        this.age = age;
}

Person.prototype. setSex = function (_sex) {
        this.sex=_sex;
}

所以说,类不算什么新玩意,大多数类的特性都可以通过之前的函数对象与原型来推导。

1.所有类都有constructor函数,如果没有显式定义,一个空的constructor方法会被默认添加(有点类似java了)。当然所有函数对象都必须有个主体。

2.生成类的实例对象的写法,与ES5通过构造函数生成对象完全一样,也是使用new命令。

class B {}
let b = new B();

3.在类的实例上面调用方法,其实就是调用原型上的方法,因为类上的方法其实都是添加在原型上。

b.constructor === B.prototype.constructor // true

4.与函数对象一样,Class也可以使用表达式的形式定义。

let Person = class Me {
    getClassName() {
        return Me.name;
    }
};

相当于

var Person = function test(){}

5.Class其实就是一个function,但是有一点不同,Class不存在变量提升,也就是说Class声明定义必须在使用之前。

全局变量


全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。

ES5之中,全局对象的属性与全局变量是等价的,隐式声明或者在全局环境下声明的变量是挂在全局对象上的。

ES6规定,var命令,function命令以及隐式声明的全局变量,依旧是全局对象的属性;而let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。

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

let b = 1;
console.log(window.b) // undefined

函数的形参


函数的形参,隐藏着在函数一开始声明了这些形参对应的变量。

function a(x,y){}
可以看成  
function a(){
    var x=arguments.length <= 0 || arguments[0] === undefined ? undefined : arguments[0];
    var y=arguments.length <= 1 || arguments[1] === undefined ? undefined : arguments[1];
}

当然在ES6下默认声明就是用的let了,所以函数a变成:

function a(){
    let x=arguments.length <= 0 || arguments[0] === undefined ? undefined : arguments[0];
    let y=arguments.length <= 1 || arguments[1] === undefined ? undefined : arguments[1];
}  

所以在ES6中会有以下几个问题:

function a(x = y, y = 2) {
  return [x, y];
}

a(); // 报错,给X赋值时y还未被let声明。  



function a(x,y) {
  let x;//相当于重复声明,报错。
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容