箭头函数的基本问题

箭头函数(arrow function):
     箭头函数是ES6之后增加的一种编写函数的方法,并且它比函数表达式要更加简洁
    箭头函数不会绑定this、arguments属性
    箭头函数不能作为构造函数来使用(不能和new一起来使用,会抛出错误)因为箭头函数中原型

箭头函数的编写: (): 函数的参数      {}: 函数的执行体
箭头函数的编写优化:
     优化一: 如果只有一个参数()可以省略,两个参数就不可以省略
     优化二: 如果函数执行体中只有一行代码, 那么可以省略大括号, 连同return一起省略,
     这行代码的结果会作为函数的返回值默认返回的
    优化三: 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()

ES6箭头函数------this问题
    箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this
    模拟网络请求的案例:
    这里我使用setTimeout来模拟网络请求,请求到数据后如何可以存放到data中呢?
     我们需要拿到obj对象,设置data;
     但是直接拿到的this是window,我们需要在外层定义:var _this = this
     在setTimeout的回调函数中使用_this就代表了obj对象

var obj = {
            data: [],
            getData: function() {
                setTimeout(() => {
                    //模拟获取到的数据
                    var message = ["abc", "def", "jiy", "vhb"];
                    this.data.push(...message);
                }, 2000)
            }
        }

 

    之前的代码在ES6之前是我们最常用的方式,从ES6开始,我们会使用箭头函数
    为什么在setTimeout的回调函数中可以直接使用this呢?
 因为箭头函数并不绑定this对象,那么this引用就会从上层作用于中找到对应的this

//转到 
var obj = {
            data: [],
            getData: () => {
                setTimeout(() => {
                    console.log(this); //window
                }, 2000)
            }
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值