【ES6】箭头函数

2022-02-25 19:02:53 阅读：161 来源： 互联网

标签：function ES6 console log 箭头 let 函数

文章目录

一、箭头函数是什么？
二、用法详解
总结

一、箭头函数是什么？

ES6 允许使用“箭头”（ => ）定义函数。

let foo = v => v; 

// 上面的箭头函数等同于：

let foo = function(v) {
 return v; };

箭头函数(=>）的左边是参数，右边是函数体。

二、用法详解

1.箭头函数的参数

当箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。当只有一个参数时，可以不写圆括号。

let foo = () => 5;
// 等同于
let foo = function () { return 5 };

// 一个参数
let x = x => x

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
 return num1 + num2; };

2.箭头函数的函数体

当箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

当箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
 return person.first + ' ' + person.last; }

箭头函数使得表达更加简洁。

const isEven = n => n % 2 == 0;
const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。箭头函数的一个用处是简化回调函数。

3.箭头函数与普通函数

变量提升

ES5的函数声明方式（存在变量、函数定义提升）：

//形式上可以先使用，再定义。
console.log(sum)
function sum(x, y) {
    return x + y
}

ES6中，使用let方式定义函数不存在变量提升：

// 报错
console.log(sum)
let sum = function(x, y){
    return x + y
}

this的指向

普通函数中，this指向调用时的对象

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
     setTimeout(function () {
         console.log(this)
     }, 1000)
  
})
// 结果指向Window对象。因为setTimeout是window.setTimeout()的简写，调用它的对象是Window

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
     // console.log(this)
     // this指向调用此函数的对象，调用bind()的为oBtn对象，将this绑定到setTimeout函数并输出
     setTimeout(function () {
     // call apply bind
         console.log(this)
     //bind()不会立即执行而是等到1s之后再执行，而call、apply会立即执行
     }.bind(this), 1000)
  
})
// 结果指向oBtn对象

箭头函数中，this指向定义时的对象。

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
    setTimeout(() => {
        console.log(this)
    }, 1000)
})
// 结果指向oBtn对象

其实，箭头函数本身没有this，而是继承了外面一层的执行上下文的this

箭头函数不可以作构造函数

//不报错
function People(name, age){
    console.log(this)
    this.name = name
    this.age = age
}
let p1 = new People('Dorothy', 20)
console.log(p1)


//报错
let People = (name, age) => {
    this.name = name
    this.age = age
}
let p1 = new People('Dorothy', 20)
console.log(p1)

不可以使用arguments对象

//报错
let foo = () => {
    console.log(arguments)
}
foo(1, 2, 3)

可用rest参数代替arguments对象

//不报错
let foo = (...args) => {
    // console.log(arguments)
    console.log(args)
}
foo(1, 2, 3)
//[1, 2, 3]

总结

箭头函数有几个使用注意点。
（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

this 对象的指向是可变的，但是在箭头函数中，它是固定的。

标签：function,ES6,console,log,箭头,let,函数
来源： https://blog.csdn.net/qq_40725797/article/details/123138080

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9