ES6 笔记

箭头函数

箭头函数里的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,也即完成。

posted @ 2016-12-20 11:54  _NKi  阅读(246)  评论(0编辑  收藏  举报