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: ƒ}
浙公网安备 33010602011771号