ES6基础
Posted changwoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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();
以上是关于ES6基础的主要内容，如果未能解决你的问题，请参考以下文章