ES6中的箭头函数

ES6中的箭头函数
箭头函数的基础语法

 let fn = function (x,y) {
     return x+y;
 }
 fn(10,20);
//=>改写成箭头函数
let fn=(x,y)=> x+y;


let fn2 = function () {
    let x =10,
        y = 20;
    console.log(x+y);
    return x+y;
};
fn2();
//=>改写成箭头函数
let fn2 =()=>{
    let x =10,
        y = 20;
    console.log(x+y);
    return x+y;
};

let fn3 = function (n = 0) {
    let x =10,
        y = 20;

    return x+y+n;
};
//=>改写成箭头函数
let fn3 =(n=0)=>{
    let x =10,
        y = 20;
    return x+y+n;
};

箭头函数中不支持arguments

//传统的函数支持arguments
// let fn = function () {
//         console.log(arguments);//10 20 30 40
//     let arg = Array.prototype.slice.call(arguments);
//     return eval(arg.join('+'));
// };
//arguments 箭头函数中不支持
let fn = (...arg)=>{
   // console.log(arguments);//Uncaught ReferenceError: arguments is not defined
    console.log(arg instanceof Array);// true
    return eval(arg.join('+'))
}//不支持arguments,我们使用es6中的剩余运算符...来获取传递进来的所有参数值(使用剩余运算符接收到的结果本身就是一个数组,不需要再转换了)
//let fn = (...arg) => eval(arg.join('+')); 任意数求和
console.log(fn(10, 20, 30, 40));

箭头函数中的this问题

复习普通函数中this指向问题

//=>普通函数执行this指向:看函数执行前面是否有点,有点,点前面是谁 this就是谁 没有点 this指向window或者undefined(严格模式下)
    let obj = {
          name:'xx',
        fn() {
            //与sum编译后效果一样
            console.log(this);
        },
        sum:function () {

        }
    };

obj.fn();//obj

document.body.onclick = obj.fn();//this:body
setTimeout(obj.fn,1000);//this:window
obj.fn.call(12);//this:12

不管我们怎么操作,最后this都指向window:箭头函数中没有自己的this,用到的this都是所在宿主环境(上级作用域)中的this


    let obj = {
          name:'xx',
        fn:()=> {
            console.log(this);//不管我们怎么操作,最后this都指向window:箭头函数中没有自己的this,用到的this都是所在宿主环境(上级作用域)中的this
        }
    };

obj.fn();//obj

document.body.onclick = obj.fn();//this:window
setTimeout(obj.fn,1000);//this:window
obj.fn.call(12);//this:window

以后实战项目中,不是要把所有的函数都改为箭头函数,根据自身需要来修改即可(例如:我们需要让函数中的this是宿主环境中的this,我们才是用箭头函数,或者不涉及this问题,我们想让代码写起来简单一些也可以使用箭头函数;)

  let obj2 = {
      name:'xx',
      fn(){
          //this obj
          // setTimeout(function () {
          //     //this window
          // }.bind(this),10000);


          // var _this = this;
          // setTimeout(function () {
          //          //this obj
          //      },10000);

          setTimeout(()=>{
              //this obj
          },10000)
      }
  } ;
  obj.fn();

箭头函数中一点扩充

let fn = ()=>{
    console.log(this);//window
};

let obj = {
    sum:function () {
        //this obj
        fn();//this window//宿主环境:不是执行的环境而是定义的环境,fn虽然是这里执行,但是他是在window下定义的,所以他的宿主环境还是window
    }

}

对于层级嵌套的箭头函数

// let fn = function (i){
//     i++;
//     return function (n) {
//         return n+(++i);
//     }
// }

let fn = i =>(n)=>n + (++i);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值