ES6语法简单入门
1.ES5语法中var声明对象的缺点
- 为先声明就使用，不报错
console.log(a)
var a =1 // undefind
- 顶层对象的属性属于window对象，而window对象有自己的属性和方法，var定义的对象很容易将顶层的属性和方法替代了，会出现问题
2.在ES6中用let声明变量（使用var也是可以用的，可以混用，单不推荐）
3.let声明变量有什么特点?
- 局部作用域，一个大括号就是一个作用域，在打括号内声明的变量只在本打括号内起作用，在其他位置都不生效
- 不存在变量提升，必须先声明再使用，这点和var不一样
- 不能重复声明
var a = 10;
let a = 10; // 报错，a已经被var声明过了，let不可以再声明
let aa=10;
let aa =20; // 不报错
- let声明的全局变量不属于windows对象，var声明的对象属于window对象
- 模板字符串：${变量名}可以用来插入值，类似于python中的"""""",可以写多行文本，另外还可以通过它来实现字符串的格式化,但是值一定用``括起来（感叹号上面的反引号）
let c = 22;
let m = `cc${c}`; // 'cc22'
4.ES5函数的写法
function add(x){return x};
// 匿名函数
var add = function(x){return x};
5.ES6函数的写法
- 普通的函数写法
// 写法同ES5类似，区别就是将var改成了let
function add(x){return x};
// 匿名函数
let add = function(x){return x};
- 箭头函数的写法：ES6比ES5新增了箭头函数
let f1 = (x,y) => x*y;
let f2 = x => {
console.log(x*x)
return x
}
// 多个参数时，必须要加括号；没有参数时，必须写一个（）；返回值只能有一个。
6.自定义对象的写法
- ES5
var a = {
name:'jack',
age:18,
f1:function(){ // 在自定义对象中放入函数方法
console.log(this); // 这个this指的是{name: 'jack', age: 18, f1: ƒ}
console.log(this.name)
}
}
a.f1()
// {name: 'jack', age: 18, f1: ƒ}
//jack
- ES6
let name = 'jack';
let b = {
name:'Tony',
f1:()=>{
console.log(this);
console.log(this.name)
}
};
b.f1();
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
// undefined
- 重点强调
// 箭头函数已经改变了this的指向，不再指向自己的调用者，而指向调用者外层的对象。在上面的两个案例中，var可以拿到window里面的name属性，而let是拿不到的，因为let声明的对象不从属于window对象
7.函数的单体模式写法
如果一个函数封装到了某个自定义对象当中，那么它有一种简单的写法，叫做对象的单体模式写法，详情如下：
f1:function(){} 可以写成 f1(){}
8.ES5写类的方法
// 只含有属性，没有方法的类的编写
function People(name,age){
this.name = name,
this.age = age
}
var a = new People('jack',18)
a.name // jack
a.age // 18
// 含有方法类的书写
function People(name,age){
this.name = name,
this.age = age
}
People.prototype.a1 = function(x){
console.log(this)
console.log(x)
}
var a = new People('jack',18)
a.a1(5)
// People {name: 'jack', age: 18}
// 5
// 含有箭头函数方法类的书写
function People(name,age){
this.name = name,
this.age = age
}
People.prototype.a1 = (x) => {
console.log(this)
console.log(x)
}
var a = new People('jack',18)
a.a1(5)
//Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
// 5
