[ES6] ES 6基本用法

ES6（JS）在线编辑器：https://www.runoob.com/try/try.php?filename=tryjs_hoisting4

一、ES6语法

1.let

局部作用域

{
    let x = 5;
}
console.log(x)

let定义的变量x的作用域在大括号范围内，所以在括号外面打印x，会报错：y is not defined

不存在变量提升

console.log(y)
var y = 6;

当我们使用var来定义变量y时，之前打印y的话，结果为undefined，而不会报错，这是因为y的声明被自动提前到作用域的最前面了，相当于：

var y;  // 此时y为undefined
console.log(y)
var y = 6;

从这里也可以看出，var是可以对变量重复声明的。

变量不能重复声明

let不能对变量重复声明：

{
    let x = 5;
    let x = 7;  
}    

报错：Identifier 'x' has already been declared

2.const

和let的特点类似：

• 局部作用域
• 不存在变量提升
• 变量不能重复声明

另外还有一条，就是定义常量（即不可变）：

• 定义常量

3.模板字符串

let name = 'leo';
let str = `我的名字是:${name}`;
console.log("str: " + str);

模板字符串两边使用的是"反引号"。

4.箭头函数

在ES5中，我们定义函数是这样的：

function add(x){
    return x;
}

或者：

var add = function(x){
    return x;  
}

但在ES6中，添加了箭头函数：

let add2 = (x)=>{  // 这里的(x)表示参数为x
    return x;
}

还有一种（直接返回参数）：

let add2 = x => x;  // 第一个x为参数，第二个x为return x；

5.定义对象

let person = {
    name : "leo",
    age :32,
    func : function(){
        console.log(this);  // 打印{name: "leo", age: 32, func: ƒ}，指向person本身
        console.log(this.name);  // 打印leo
    } 
}
person.func();

单体模式写法：

let person = {
    name : "leo",
    age :32,
    func(){
        console.log(this);  // 打印 {name: "leo", age: 32, func: ƒ}，指向person本身
        console.log(this.name); // 打印leo
    }
}
person.func();

两面两种写法是完全一样的。

 

但是，如果在对象中使用箭头函数：

let person = {
    name : "leo",
    age :32,
    func : ()=>{
        console.log(this);  // 打印 Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
    } 
}
person.func();

可以看到，this的指向被改变了。不是指向person本身，而是指向创建person对象的父级对象（即上下文），这里是Window。

6.类

在ES5中，类是这么定义的：

// 定义一个Person类，属性有name和age
var Person = function(name,age){  
    this.name = name;
    this.age = age;
}
// 为Person类添加方法showName
Person.prototype.showName = function(){
    console.log(this.name);
}
// 定义个Person对象p
var p = new Person('leo',32);
p.showName();

在ES6中：

class Person{
    // 构造函数，和python的__init__()一样
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    // 定义方法
    showName(){
        console.log(this.name);
    }
}
let p = new Person('leo',32);
p.showName();

注意，成员方法都是单体模式写法。

 

 

66