JavaScript箭头函数的五种使用方法及三点注意事项

目录
  • 使用
    • 简略编写
    • 结合解构赋值
    • 结合扩展运算符
    • this指向的改变
    • 绑定this
  • 注意细节
    • 关于构造
    • 关于参数对象
    • 关于yield命令
  • 面试题

前言：

箭头函数是ES6新增的定义函数的方式，我们可以使用()=>{}来顶替以前的函数定义方式，下面从五个使用姿势与三点注意事项来刨析箭头函数。

使用

简略编写

当我们箭头函数函数只有一个参数的时候是可以将()省略，当代码块只有一行的时候可以将{}与return省略

const fn = num => num.sort();
console.log(fn([2, 1, 3])); // [1,2,3]

如上代码块只有一个参数num且只有一行代码return num.sort()，所以将()，{}与return省略

结合解构赋值

为了进一步简化还可以与解构赋值结合使用

let person = {
  name: "猪痞恶霸",
  age: 12,
};
const fn = ({ name, age }) => name + "今年" + age + "岁了";
console.log(fn(person)); // 猪痞恶霸今年12岁了

使用解构赋值直接将name与age解构，替换了person,name的用法，使函数更加简洁。

结合扩展运算符

在函数参数定义中可以结合rest参数搭配使用

const fn = (...arr) => arr.sort();
console.log(fn(2, 1, 4)); // [1,2,4]

使用...arr将所有参数都包裹在内，在函数体内进行一些需要的操作。

this指向的改变

在箭头函数中使用this，它的指向是不变的，因为箭头函数没有拥有属于自己的this，其指向的是函数定义时所在的对象 , 所以箭头函数的出现往往就顶替了我们常用的let _that = this又或者在函数结尾使用绑定this指向的对象来解决在函数体内this的问题

var name = "fzf404";
function set() {
  setTimeout(() => {
    console.log(this.name);
  }, 1000);
}
set(); // fzf404
set.call({ name: "猪痞恶霸" }); // 猪痞恶霸

如上例子，在全局中声明了一个name变量，我们再通过call()绑定新的对象{ name: "猪痞恶霸" }，在set函数执行的时候，箭头函数被定义，而被定义的时候其已经通过set.call()更改了指向的对象，所以打印出的是新的对象中的name属性，这就是箭头函数的this指向特点，如果是普通函数，其指向依旧是顶层对象。

绑定this

在之前ES5可以通过bind，call，apply来显式绑定this对象，而箭头函数的出现打破了这种局面，同时也配套使用::来作为函数绑定的方式

::的使用方法：将要绑定的对象放在::的左边，函数放在::的右边，执行后，函数内的this就会指向绑定的对象

obj::fn
// 等同于
fn.bind(obj)

如上，原来的显式绑定方式与使用::的绑定方式进行一个比较，看过二者的比较就可以了解::的使用了。

注意细节

关于构造

箭头函数无法作为一个构造函数，所以无法通过new命令来构造

const fn = () => {}
let _fn = new fn() // fn is not a constructor

如上，如果使用new来构造的化就会抛出fn不是一个构造函数

关于参数对象

在箭头函数内是无法使用arguments即参数对象，因为在其函数体内部不存在arguments对象当然我们可以使用扩展运算符来代替其使用，比使用参数对象方便。

const fn = () => {
    console.log(arguments)
}
fn() // arguments is not defined

关于yield命令

箭头函数无法使用yield命令，也就是说无法将箭头函数转变为生成器函数，具体是为什么，我的直观感受就是作为生成器必须是function*，而箭头函数的形式无法作为一个生成器。

了解到这里，下面我们来看一道经典的面试题。

面试题

let name = "猪痞恶霸";
let person = {
    name:"fzf404",
    fn: () => {
        setTimeout(() => {
            console.log(this.name);
        })
    }
}
person.fn();

上面是一道考察箭头函数，this指向，作用域的面试题，它的打印结果为undefined，我们来一点一点分析

  • 使用let在下声明了一个name
  • 再声明一个对象，内含一个name属性和一个方法，该方法使用定时器并打印this.name
  • 调用对象的这个方法，this开始寻找
  • 定时器中的箭头函数没有this，向上寻找，到达person，由于person是一个对象，所以它的{}包裹的不是作用域
  • 继续向上寻找，到达了顶层对象window
  • 查看window内是否含有name属性，由于使用let声明，所以其属性不在window中，打印出undefined

到此这篇关于JavaScript箭头函数的五种使用方法及三点注意事项的文章就介绍到这了,更多相关JS箭头函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript箭头函数中的this详解

    前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不

  • JavaScript 箭头函数的特点、与普通函数的区别

    目录 1. 箭头函数的使用 1. 普通函数到箭头函数 2. 省略大括号和 return 3. 省略小括号 2. 箭头函数与普通函数的区别 1. 箭头函数的 this 是父级作用域的 this 2. call.apply.bind无法改变箭头函数的 this 3. 不可以作为构造函数 4. 不可以使用 arguments 5. 箭头函数不支持 new.target 1. 箭头函数的使用 ES6 中新增了使用箭头=>来定义函数表达式的方法.很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法

  • JavaScript中箭头函数与普通函数的区别详解

    JavaScript中箭头函数与普通函数的区别详解

    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('lalalala'); } 普通函数: function fun() { console.log('lalla'); } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return. 箭头函数是匿

  • javascript条件式访问属性和箭头函数介绍

    目录 一.条件式访问属性 二.箭头函数介绍 一.条件式访问属性 ?. 是ES2020引入的新特性,是一个条件式属性访问操作符,当你访问值为undefined变量的某个属性值时,如果使用.操作符会直接报错,如果使用条件式属性访问操作符来访问会返回undefined. 看例子: let book = {price:10, edition:10, name:"javascirpt" } console.log(book.page.num) 直接报错: TypeError: Cannot re

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JS中不应该使用箭头函数的四种情况详解

    JS中不应该使用箭头函数的四种情况详解

    目录 箭头函数的一些缺点 1.不支持参数对象 2.无法通过apply.call.bind来改变this指针 什么时候不能使用箭头功能 1.请不要在构造函数中使用箭头函数 2.请不要在点击事件中操作this 3.请不要在对象的方法中使用箭头函数. 4.请不要在原型链中使用箭头函数 箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数? 现在,我们开始吧. 箭头函数的一些缺点 1.不支持参数对象 在箭头函数中,我们不能像在普通函

  • 详解JavaScript什么情况下不建议使用箭头函数

    详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • 深入理解JavaScript 箭头函数

    深入理解JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语句: function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); 也可以创建相同功能的函数表达式,如下所示: var add = function (nu

  • JS中箭头函数与this的写法和理解

    前言 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法 在ES6语法之前,JS中的函数由function关键字.params参数和被花括号包裹的函数体组成.为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋

  • JavaScript箭头函数的五种使用方法及三点注意事项

    目录 使用 简略编写 结合解构赋值 结合扩展运算符 this指向的改变 绑定this 注意细节 关于构造 关于参数对象 关于yield命令 面试题 前言: 箭头函数是ES6新增的定义函数的方式,我们可以使用()=>{}来顶替以前的函数定义方式,下面从五个使用姿势与三点注意事项来刨析箭头函数. 使用 简略编写 当我们箭头函数函数只有一个参数的时候是可以将()省略,当代码块只有一行的时候可以将{}与return省略 const fn = num => num.sort(); console.log

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript 数组遍历的五种方法

    在使用 JavaScript 编写代码过程中,可以使用多个方法对数组进行遍历:包括 for循环.forEach循环.map 循环.forIn循环和forOf循环等方法. 一.for 循环:基础.简单 这是最基础和常用的遍历数组的方法:各种开发语言一般都支持这种方法. let arr = ['a','b','c','d','e']; for (let i = 0, len = arr.length; i < len; i++) { console.log(i); // 0 1 2 3 4 cons

  • JavaScript函数的4种调用方法实例分析

    本文实例讲述了JavaScript函数的4种调用方法.分享给大家供大家参考,具体如下: JavaScript 函数有 4 种调用方式: 1. 作为一个函数调用 2. 函数作为方法调用 3. 使用构造函数调用函数 4. 作为函数方法调用函数 分述如下: 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20 以上

  • JavaScript生成UUID的五种方法详解

    目录 简介 1.第一种 2.第二种 3.第三种 4.第四种 5.第五种 简介 UUID(Universally Unique IDentifier) 全局唯一标识符. UUID是一种由算法生成的二进制长度为128位的数字标识符.UUID的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中的 x 是 0-9 或 a-f范围内的一个32位十六进制数.在理想情况下,任何计算机和计算机集群都不会生成两个相同的UUID. 1.第一种 function guid() {

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

  • JavaScript箭头函数与普通函数的区别示例详解

    JavaScript箭头函数与普通函数的区别示例详解

    目录 箭头函数与普通函数的区别 箭头函数的理解 箭头函数里的this指向 总结 箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆括号和大括号,圆括号里面一般放置参数,大括号一般放置函数主体,很明显箭头函数不需要写那么长,举个例子,有一个数组,使用map方法为数组的每个元素增加字符 let arr=['昨天','今天','明天'] let newarr=arr.map(function(item){ return item+='放假'

  • JavaScript箭头函数_动力节点Java学院整理

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句

随机推荐