zoukankan      html  css  js  c++  java
  • 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,也即完成。

  • 相关阅读:
    看盘技巧及要点
    棉花价格持续走高带来阶段性投资机会
    2009430远光软件,美锦能源
    c#获取汉字首字母拼音
    Linq分组查询统计
    json序列化
    jquery 实现飘落效果
    python学习开始
    DOS命令大全 DOS常用代码全在这里
    Python包含以下方法:
  • 原文地址:https://www.cnblogs.com/NKnife/p/6202101.html
Copyright © 2011-2022 走看看