Vue小白篇 - ES6的语法

为什么要学 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>