es6箭头函数以及this的指向问题

es3,es5中的构造函数与es6中的箭头函数区别:

es3 es5中的函数的写法:

function (){

}

es6中的箭头函数的写法:

()=>{

}

注意:如果参数只有一个,并且函数体内直接将参数作为返回值,则可以省略()和{}。

 {
    var array = [1,2,3,4,5];
    var adds = array.map(function (v) {
      return v+1;
    });
    console.log(array,adds);
}
{
    let arr = [1, 2, 3, 4, 5];
    let odd = arr.map((v) => {
        return v + 1;
    });
    console.log(arr, odd);
}

es3 es5以及es6中的this的指向问题:

在es3和es5中的this的指向问题,this指向的是该函数被调用时的对象,在下面的代码中,c对象调用了b(),所以this指向的就是c对象, 所以最后输出的就是”a+“。

{
    var factory = function () {
        this.a = 'a';
        this.b = 'b';
        this.c =  {
            a: "a+",
            b: function f() {
              return this.a;
            }
        }
    };
    console.log(new factory().c.b());
}

es6中的this的指向问题,this的指向是定义时this的指向 ,定义时this的指向是构造函数的实例,即new factory()。 new factory()的实例是上面的a 。

{
    let factory = function () {
        this.a = 'a';
        this.b = 'b';
        this.c =  {
            a: "a+",
            b: () => {
                return this.a;
            }
        }
    };
    console.log(new factory().c.b());
}

猜你喜欢

转载自blog.csdn.net/lishundi/article/details/81660646