为什么要学 ES6 的语法呢?
因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.com/
# // var 声明的是全局变量
<script type="text/javascript">
// 输出a,发现没有,会自动在前面 var a; 然后再进行操作
console.log(a) //有变量提升,undefined
{
var a = 3;
}
console.log(a) //3
# let 声明的是局部的,不会存在变量提升
console.log(b)
{
// b 是局部作用域的 只能在这个大括号里才能使用
let b = 10;
}
console.log(b)
</script>
let声明变量的特点:
1、局部作用域
2、不会存在变量提升
3、变量不能重复声明
let 与 var 声明变量的区别:
var 声明的是全局变量,而 let 是局部的
const 声明变量
<script>
console.log(b)
{
const b = 10;
b = 20; // 报错
}
console.log(b)
</script>
const 声明变量的特点:
1、局部作用域
2、不会存在变量提升
3、变量不能重复声明
4、只能声明常量,不可变的量 (比 let 声明变量多一个特点)
模板字符串
tab 键上面的反引号 `${变量名}` 来插值
<script>
let name = '未来';
let str = `我是${name}`;
console.log(str) // 我是未来
</script>
ES6 的箭头函数
funtion () {} === () => {} this的指向发生改变
# ES5 声明函数:
function add(x){
return x;
}
add(5)
let add = function(x){
return x;
}
console.log(add(50))
# ES6 声明函数(箭头函数):
let add = (x) => {
return x;
}
console.log(60)
# 简洁版(不易阅读):
let add2 = x => x;
console.log(add2(100))
#ES5 的案例:
<script type="text/javascript">
let person = {
name: '日天',
age: 18,
fav: function(){
console.log(this) // 指向 person
console.log(this.name) // 日天
}
}
person.fav()
</script>
# ES6 的案例:
let person = {
name: '日天',
age: 30,
fav: () => {
//this指向 发生了改变。this指向 定义person的父级对象(上下文)
console.log(this) // 指向window
console.log(this.name) // 输出 空
}
}
person.fav()
# 对象的单体模式
<script type="text/javascript">
let person = {
name: '日天',
age: 18,
fav(){ // 相当于 fav:function(){}函数声明
console.log(this) // // 指向 person
console.log(this.name) // 输出 日天
}
}
person.fav()
</script>
ES6 的类
function person(name, age){
this.name = name;
this.age = age;
}
var p1 = person('tom','16');
<script>
//声明一个Person 类
class Person{
// 当前类的父类(继承性)
// constructor 方法相当于python中的__init__初始化方法
constructor(name='tom', age=45){
this.name = name;
this.age = age;
}
showname(){
console.log(this.name)
}
showage(){
console.log(this.age)
}
}
let v = new Person();
v.showname(); //输出tom
</script>