1.es6中的let和const的区别
(1) let
在局部作用域有效
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 注释: 上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。 下面的代码如果使用var,最后输出的是10。 上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。 如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6。 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。 另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。 for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。
不会存在变量提升
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。 为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2; 上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。
变量不能重复声明
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let不允许在相同作用域内,重复声明同一个变量。 // 报错 function func() { let a = 10; var a = 1; } // 报错 function func() { let a = 10; let a = 1; } 因此,不能在函数内部重新声明参数。 function func(arg) { let arg; // 报错 } function func(arg) { { let arg; // 不报错 } }
(2) const
局部作用域
不会存在变量的提升
变量不能重复声明 只声明常量,不可变的量
(3) 模板字符串
table键上的反引号$(变量名)来实现字符串的拼接
egg:
let name = "张三";
let str = `我是${name}`
2.es6的箭头函数 this的指向发生了改变
方式一:
let add = (x) =>{ return x } console.log(add(20))
方式二: let add2 =x=>: console.log(add2(20))
3.es6的对象
let person ={ name:"张三", age:30, fav:function () { console.log(this.name)//匿名函数this指向当前对象 } } person.fav() let person={ name:'张三', age:20, fav:() => { console.log(this),//指向定义 person的父类(上下文) console.log(this.name) } }
对象的单体模式
let person={
name='张三',
fav (){
console.log(this.name) //指的当前的对象
}
}
person.fav()
//张三
4.es6的类
class person{ constructor(name='alex',age=18){ this.name=name; this.age=age; } showname(){ console.log(this.name) } showage(){ console.log(this.age) } } let v=new person(); v.showname() v.showage()
补充:es5中的函数this指向了使用该函数的对象
var person = { name:'alex', fav:function(){ console.log(this);//person } } person.fav()
-箭头函数
var person = { name:'alex', fav:()=>{ console.log(this);//window }, showName(){ console.log(this);//person } } person.fav()
有关this指向问题的总结:
--this的指向和vm实例没有任何的关系,而是与箭头函数和普通函数的区别
1.es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm。
2、箭头函数的this指向它的调用者所在的上下文,也就是vm实例所在的上下文(定义vm的父类),即window.