箭头函数(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)
}
}