箭头函数
箭头函数里的this会引用 定义 箭头函数时,外部作用域 的 this 。箭头函数只是 引用 外部作用域的 this ,本身不存在 this。同时因为没有 this ,所以 无法用new生成实例,例:
var name = 'window'; function test(){ //实际等同于这样 //var _this = this; this.name = 1; this.method = ()=>{ //console.log(_this.name); console.log(this.name); } } var b = new test(); setTimeout(b.method, 500); //1
这个例子中,箭头函数的 this 在定义 method 方法时,引用了test的上下文,而不是执行时引用 this ,所以 setTimeout 方法执行的 method 方法时,this 还是指向了 test 。
function test(){ this.method = ()=>{ function foo(){ console.log(this); //Window console.log(this instanceof Window); //true } foo(); } } var b = new test(); setTimeout(b.method, 500); //1
这个例子中,这个例子中 this 之所以没有引用箭头函数外层,是因为 foo 函数里的 this 作用域此时属于Window,也就不用往 foo 函数外层查找this了,所以 this 指向了 Window。
参数默认值
ES6之前,参数不能给定默认值,只能通过下面的形式给参数设定默认值。
function a(x){ x? x: x = 1; //或者 if(typeof x === 'undefined'){ x = 1; } }
ES6只要下面的形式就能给参数设定默认值
function a(x = 1){ console.log(x); //1 }
如果给参数赋予一个默认的函数,就会出现特殊情况。例1:
var x = 0; function a(x, y = ()=> {x = 1; console.log(x); /* 1 */ }){ var x = 10; y(); console.log(x); //10 } a(); console.log(x); //0
参数y里的代码执行之后,函数 y 里的 x 确实已经被赋值了 1,但是函数体内的 x 值还是10,同时全局变量 x 也还是0。
假如把例1里的函数 y 从默认值里放到函数 a 内部,则会变成这样。
var x = 0; function a(x, y){ if(typeof y === 'undefined'){ y = ()=> { x = 1; } } var x = 10; y(); console.log(x); //1 } a(); console.log(x); //0
结果是 x = 1 把前面的 x = 10 给覆盖了,当然全局变量依然没有变化。
这两个例子看似一样,但实际上,ES6的机制是:参数默认值是一个函数时,会生成一个参数级作用域。导致这两个例子本质上有所差别,同时函数体内部是函数级作用域,函数外部是外部作用域。三个作用域互相独立,又由作用域链引用。从内往外的顺序是:
函数级作用域 => 参数级作用域 => 外部作用域
函数a => 参数 x, y 所在的括号部分 => 全局变量 (以例1为例)
注意下面这种情况:
function a(x, y = ()=> {var b = 10; console.log(b)}){ y(); //10 console.log(b); //报错 b is not defined } a();
参数级作用域只是参数声明的括号部分,而参数 y 内部的作用域对参数级作用域不可见。
也就是变量 b 被函数 y 的作用域隔离开了,不属于参数级作用域,也就无法给函数 a 所捕获。
而例1 中在声明函数的时候,会同时(也许是执行的时候,暂不清楚)声明变量 x 与 函数 y。由于已经声明了变量 x,同时 x 和 y 同属块级作用域。以及作用域链的存在,外部作用域无法查找内部作用域里的变量,只能往外查找变量。按照 函数级作用域 => 块级作用域 => 外部作用域 的顺序,参数部分的块级作用域无法调用函数内部的变量。
所以例子中的 x 实际上被定义了3次,每一个作用域各1次,也就导致了每个作用域中的 x 的值互相独立赋值。
所以实际上例1编译成ES5的代码是下面这样的:
var x = 0; function a(x, y){ y = function() { x = 1; //参数里已经声明了变量x,所以不是全局里的x console.log(x); //1 } return function(){ var x = 10; y(); console.log(x); //10 }() } a(); console.log(x); //0
ES6里实现则是:
var x = 0; function a(x, y){ y = function() { x = 1; //参数里已经声明了变量x,所以不是全局里的x console.log(x); //1 } { let x = 10; //用let声明一个块级变量 y(); console.log(x); //10 } } a(); console.log(x); //0
假设把例1改成下面这样:
var x = 0; function a(x, y = ()=> {x = 1; console.log(x); /* 1 */ }){ x = 10; //去掉var y(); console.log(x); //1 } a(); console.log(x); //0
在去掉了函数级作用域里的 var 关键字后,变量 x 和 参数 x 都处于同一作用域(chrome控制台显示为local,也就是函数级作用域,可能是为了兼容ES5)。此时 y 里的 x = 1 就覆盖了 x = 10。
Generator 函数与异步
Generator函数的yield没有本身不会有返回值,除非在next方法里带上参数,这个参数会变成上一个yield语句的返回值。
例:
function* f() { for(var i = 0; true; i++) { var reset = yield i; console.log(reset, i); if(reset) { i = -1; } } } var g = f(); g.next() //undefined, 0 // { value: 0, done: false } g.next() //undefined, 1 // { value: 1, done: false } g.next(true) //true, 0 // { value: 0, done: false }
如果内部有return一个值, 那么无论后面是否还有yield,直接返回对象。对象中的value属性就是那个值,done值为true,也即完成。