ES6基础

零、什么是ECMAScript?
一、let和const
二、模板字符串
三、箭头函数
四、对象的单体模式
五、面向对象
 
 
 
零、什么是ECMAScript?
  • 1997年 ECMAScript 1.0 诞生
  • 1999年12月 ECMAScript 3.0诞生,它 是一个巨大的成功,在业界得到了广泛的支持,它奠定了JS的基本语法,被其后版本完全继承。直到今天,我们一开始学习JS,其实就是在学3.0版的语法
  • 2000年的ECMAScript4.0是当下ES6的前身,但由于这个版本太过激烈,对ES3做了彻底升级,所以暂时被“和谐”了
  • 2009年12月,ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月,ES5.1版发布,并且成为ISO国际标准
  • 2013年,ES6草案冻结,不再添加新的功能,新的功能将被放到ES7中;2015年6月,ES6正式通过,成为国际标准
 
一、let和const
    let命令的用法类似于var,但是它声明的是局部变量,而var声明的是全局变量。const命令是用来声明一个只读的常量,一旦声明,就不能修改,const也是局部变量。
  • var命令会出现变量提升现象,即变量可以在声明之前使用,值为undefined,而let没有变量提升现象。
  • let不允许在相同的作用域内,重复声明同一个变量。
  • ES5只有全局作用域和函数作用域,没有块级作用域,因此会带来几种不合理的场景:1.函数内的变量会覆盖函数外的变量,由于变量提升,值为undefined(在函数内打印为undefined,在函数外为正常值)。2.用来计数的循环变量i泄露为全局变量。
 
二、模板字符串
 
    $('.test').append(`
            <a>hello ${append_1}</a> //会在class='test'类中添加a标签
        `)
使用方法` ${1} `  反引号也可以表示多行字符串
 
三、箭头函数
 
//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };
 
//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
 
函数体中this是函数对象,而箭头函数中的this是window对象
 
四、对象的单体模式
由于箭头函数this的指向问题,推出的一种写法:
    var person = {
            name: 'name',
            age: 18,
            fav(){
                console.log(this);
                console.log(this.age);
            }
    }
    person.fav();
this是person
 
    var person = {
            name: 'name',
            age: 18,
            fav: ()=>{
                console.log(this);
                console.log(this.age);
            }
    }
    person.fav();
this是window
 
五、面向对象
 
之前版本:
       function Animal(name,age){
            this.name = name;
            this.age = age;
 
        }
        Animal.prototype.showName = function(){
            console.log(this.name);
            console.log(this.age);
        }
 
        var a = new Animal('小黄',5);
        a.showName();
 
ES6引入了class的概念
class Cat{
        // 相当于 __init__
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        show_name(){
            console.log(this.name);
        }
        show_age(){
            console.log(this.age);
        }
    }
    var tom = new Cat('tom', 18);
    tom.show_age();
    tom.show_name();
 
 
原文地址:https://www.cnblogs.com/changwoo/p/9895576.html