Vue【准备篇00】:ES6的基本用法
ES6的基本用法
一、js中三种定义变量的方式const、var、let的区别
1.const定义的变量不可以修改,而且必须初始化。
1 const b = 2;//正确 2 // const b;//错误,必须初始化 3 console.log("函数外const定义b:" + b);//有输出值 4 // b = 5; 5 // console.log("函数外修改const定义b:" + b);//无法输出
2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
1 var a = 1; 2 // var a;//不会报错 3 console.log("函数外var定义a:" + a); //可以输出a = 1 4 function change(){ 5 a = 4; 6 console.log("函数内var定义a:" + a);//可以输出a = 4 7 } 8 change(); 9 console.log("函数调用后var定义a为函数内部修改值:" + a);//可以输出a=4
3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。不会存在变量提升,变量不能重复声明
1 let c = 3; 2 console.log("函数外let定义c:" + c);//输出c = 3 3 function change(){ 4 let c = 6; 5 console.log("函数内let定义c:" + c);//输出c = 6 6 } 7 change(); 8 console.log("函数调用后let定义c不受函数内部定义影响:" + c);//输出c=3
二、模板字符串
tab键上面的反引号${变量名}来差值 let name = "未来" let str = `我是${name}`
三、箭头函数
function(){} === ()=>{}
this的指向发生了改变
小结: 1、es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm。 2、箭头函数的this指向它的调用者所在的上下文,也就是vm实例所在的上下文(定义vm的父类),即window.
四、es6的类
原型prototype 当前类的父亲(继承性)
class Person{ constructor(name){ this.name = name; } fav(){ } } Vue的基本用法
五、es6的对象
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> let person = { methods:{ fav:function(){ } }, name: "日天", age: 30, fav: function () { console.log(this); //this指向 当前的对象 console.log(this.name); } }; person.fav(); let person2 = { name: "日天2", age: 30, fav: () => { console.log(this); //this指向 发生了改变。this指向 定义person2的父级对象(上下文) console.log(this.name); } }; person2.fav(); // 对象的单体模式 let person3 = { name:'日天', fav(){ console.log(this); //当前this } }; person3.fav(); </script> </body> </html> ----------------------------- 结果 -------------------------- {methods: {…}, name: "日天", age: 30, fav: ƒ} 日天 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} {name: "日天", fav: ƒ}