React系列(三):ECMAScript6.0的使用(上)

随着google和firfox以及node6.0对ES6的支持,ES6语法的定稿使它越来越受到关注,尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析,为后续的React知识点做好铺垫,主要内容如下:

  • let, const:块级作用域—声明变量
  • class, extends, super: 类,继承,指代父类
  • arrow functions:箭头函数
  • template string:字符串操作
  • destructuring:变量解构

1. let, const:块级作用域—声明变量

1.1 变量使用

ES5下的作用域:

var name = "H5";
while(true) {
    var name = "CSS3";
    console.log(name);
    break;
}
console.log(name);
// ES5的作用域分两种,一个是全局,一个函数
var a = [];
for(var i = 0; i < 10; i++) {
    a[i] = function() {
        console.log(i);
    }
}
a[5]();

变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。为了能够保留执行过程的值,所以使用闭包的形式:

var a = [];
for(var i = 0; i < 10; i++) {
    a[i] = function(x) {
        return function() {
            console.log(x);
        }
    }(i)
}
a[6]();

避免内存泄漏,不建议使用闭包,所以ES6提出了块级作用域let,采用ES6的语法:

var a = [];
for(let i = 0; i < 10; i++) {
    a[i] = function() {
        console.log(i);
    }
}
a[5]();

let属于块级作用域,不允许在代码块的外面使用申明的变量

if(1) {
    let s = 0;
}
console.log(s);

在同一代码块中不允许使用let重复定义同名变量(不同代码块中可以重复声明)

let s = 0;
let s = 7;
console.log(s);
1.2 常量

关于常量的定义,ES6提出了const;

const str = "HTML5";
str = "CSS3";
console.log(str);

一旦使用const声明常量,就不允许对其更改值,如果修改,浏览器报错
const多数应用于引入第三方库时声明变量,用来避免重名的bug。

const react = require("react");

2. class, extends, super: 类,继承,指代父类

面向对象的使用,ES6提出了class的写法,让对象的原型更具备形式。

首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享(可继承)的,代码如下:

class Project {
    constructor() {
        this.type = "H5";
    }
    says(say) {
        console.log(this.type + " and " + say);
    }
}
let pro = new Project();
pro.says("CSS3");

class Infor extends Project {
    constructor() {
        super();
        this.type = "JS";
    }
}
let infor = new Infor();
infor.says("JQ");

解析:

  • class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承要简单许多。上面定义了一个Infor类,该类通过extends关键字,继承了Project类的所有属性和方法。

  • super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

总之,ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

3. arrow functions:箭头函数

ES5的函数:

function log(i) {
    return i + 1;
}
console.log(log(6));

ES6的函数:

var log = (i) => {return i + 1};
console.log(log(6));

箭头函数的应用,主要应用于解决this指向问题

  • setTimeOut的this指向window全局
  • ES5的处理有两种:
    • 1、预存this
    • 2、借助bind(this)

ES6使用箭头函数实例:

class Projects {
    constructor() {
        this.type = "H5";
    }
    says(say) {
        // ES5预存this
        // var self = this;
        setTimeout(() => {
            console.log(this.type + " and " + say);
            // ES5使用setTimeout(function(){}.bind(this), 2000);
        }, 2000);
    }
}
let pros = new Projects();
pros.says("CSS3");

解析:

  • 使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this

4. template string:字符串模板

使用字符串拼接的时候,ES5是用一堆的”” +来连接文本与变量:

var e = "HTML5";
var f = "CSS3";
var con  = e + "拥有很多新的特性," + f + "可以用于实现酷炫效果。";
console.log(con);

使用ES6的字符串模板:

var e = "HTML5";
var f = "CSS3";
var strs = `${e}拥有很多新的特性,${f}可以用于实现酷炫效果。`;
console.log(strs);

5. destructuring:变量解构

5.1 结构赋值的使用:

ES5的对象赋值:

let u = "H5";
let v = "CSS";
let objx = {html: u, css: v};
console.log(objx);

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构:

let html = "HTML5";
let css = "CSS3";
let objs = {html, css};
console.log(objs);

可以放过来书写:

let objy = {html: "H5", css: "CSS3"};
let {html, css} = objy;
console.log(html, css);
5.2 解构赋值在箭头函数应用

解构赋值中箭头函数指向window。

var name = 1;
var age = 2;
var sex = "sss";
var test = {
    name,
    age,
    [sex] : 3,
    // this指向改成了window
    log: (x) => {
        console.log(x, this);
    }
    // 这里的this指向test
    // log: function(x) {
    //     console.log(x, this);
    // }
}
test.log(2);
console.log(test);

总结

本文主要讲解了ES6语法中变量、常量、函数、类与继承等基础知识点,下节讲继续更加深入的剖析ES6的核心语法。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值