这一次,彻底搞懂箭头函数
一、箭头函数的特点
1. 相比普通函数,箭头函数有更加简洁的语法。
普通函数
function add(num) {return num + 10
}
箭头函数
const add = num => num + 10;
2. 箭头函数不绑定this,会捕获其所在上下文的this,作为自己的this。
这句话需要注意的是,箭头函数的外层如果有普通函数,那么箭头函数的this就是这个外层的普通函数的this,箭头函数的外层如果没有普通函数,那么箭头函数的this就是全局变量。
下面这个例子是箭头函数的外层有普通函数。
let obj = {fn:function(){console.log('我是普通函数',this === obj) // truereturn ()=>{console.log('我是箭头函数',this === obj) // true}}
}
console.log(obj.fn()())
下面这个例子是箭头函数的外层没有普通函数。
let obj = {fn:()=>{console.log(this === window);}
}
console.log(obj.fn())
// true
3. 箭头函数是匿名函数,不能作为构造函数,不可以使用new命令,否则后抛出错误。
4. 箭头函数不绑定arguments,取而代之用rest参数解决,同时没有super和new.target。
箭头函数没有arguments、super、new.target的绑定,这些值由外围最近一层非箭头函数决定。
下面的这个函数会报错,在浏览器环境下。
let f = ()=>console.log(arguments);//报错
f(); // arguments is not defined
下面的箭头函数不会报错,因为arguments是外围函数的。
function fn(){let f = ()=> {console.log(arguments)}f();
}
fn(1,2,3) // [1,2,3]
箭头函数可以通过拓展运算符获取传入的参数。
5. 使用call,apply,bind并不会改变箭头函数中的this指向。
- 当对箭头函数使用call或apply方法时,只会传入参数并调用函数,并不会改变箭头函数中this的指向。
- 当对箭头函数使用bind方法时,只会返回一个预设参数的新函数,并不会改变这个新函数的this指向。
请看下面的代码
window.name = "window_name";let f1 = function () {return this.name;
};
let f2 = () => this.name;let obj = { name: "obj_name" };console.log(f1.call(obj)); //obj_name
console.log(f2.call(obj)); // window_name
console.log(f1.apply(obj)); // obj_name
console.log(f2.apply(obj)); // window_name
console.log(f1.bind(obj)()); // obj_name
console.log(f2.bind(obj)()); // window_name
6. 箭头函数没有原型对象prototype这个属性
由于不可以通过new关键字调用,所以没有构建原型的需求,所以箭头函数没有prototype这个属性。
let F = ()=>{};
console.log(F.prototype) // undefined
7. 不能使用yield关键字,不能用作Generator函数
二、arguments辨析
既然上文我们提到了arguments,那么下面我们就仔细讲讲这个arguments。
arguments有什么用?
arguments对象是所有非箭头函数中都可用的局部变量,可以使用arguments对象在函数中引用函数的参数,此对象包含传递给函数的每一个参数,第一个参数在索引0的位置。
如何将arguments对象转换为数组
- 通过slice
- 通过拓展运算符
- 通过Array.from
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);const args = Array.from(arguments);
const args = [...arguments];
arguments函数如何调用自身函数?
我们先看看下面这个函数,这个是可以正常运行的。
function factorial (n) {return !(n > 1) ? 1 : factorial(n - 1) * n;
}[1,2,3,4,5].map(factorial);
但是作为匿名函数则不行。
[1,2,3,4,5].map(function (n) {return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n;
});
因此arguments.callee诞生了。
[1,2,3,4,5].map(function (n) {return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
});
所以arguments要想调用自身的匿名函数,可以通过arguments.callee来调用。
这一次,彻底搞懂箭头函数相关推荐
- 一文搞懂property函数
一文搞懂property函数 接下来我带大家了解一个函数的作用以及使用技巧,希望对大家都有帮助,话不多说,接下来就开始我的表演 特性 通过存取方法定义的属性通常称为特性(property) 让所有的属 ...
- 2022年了,你还没搞清楚箭头函数与普通函数的区别嘛?
目录 1.箭头函数简介 2.箭头函数与普通函数的区别 A.声明方式不同,匿名函数 B.this指向不同 C.箭头函数的this永远不会变,call.apply.bind也无法改变 D.箭头函数没有原型 ...
- 彻底搞懂python函数2
目录 一.变量作用域 二.lambda表达式 三.生成器函数 一.变量作用域 变量起作用的代码范围称为变量的作用域,不同作用域内变量名可以相同,互不影响. 局部变量在函数内部定义的普通变量只在函数内部 ...
- 【C标准库】详解fopen函数 一篇让你搞懂fopen函数
创作不易,感谢支持!‾\underline{创作不易,感谢支持! }创作不易,感谢支持! fopen函数 头文件:stdio.h 功能是打开一个文件,其声明格式是: FILE *fopen(cons ...
- 主流数据库之一篇文搞懂聚合函数
文章目录 目录 文章目录 前言 聚合函数 COUNT()函数 AVG(列)函数和SUM(列)函数 MAX(列)和MIN(列)函数 GROUP BY子句的应用 HAVING子句的使用 前言 大家好,我是 ...
- 彻底搞懂DAX函数-ISCROSSFILTERED
这篇文章来研究一下ISCROSSFILTERED函数 语法: ISCROSSFILTERED() https://docs.microsoft.com/zh-cn/dax/iscrossfiltere ...
- 一文搞懂C语言回调函数
转载自:https://segmentfault.com/a/1190000008293902?utm_source=tag-newest 博主:Rdou Typing 来源:segmentfault ...
- ES6 箭头函数理解
你看懂"箭头函数"了么? 时间 2016-10-24 20:30:00 梁桂钊的博客 原文 http://blog.720ui.com/2016/es6_arrow_fun ...
- 一文搞懂:词法作用域、动态作用域、回调函数、闭包
把以前一直只限于知道,却不清晰理解的这几个概念完完整整地梳理了一番.内容参考自wiki页面,然后加上自己一些理解. 词法作用域和动态作用域 不管什么语言,我们总要学习作用域(或生命周期)的概念,比如常 ...
最新文章
- glance系列二:glance部署及操作
- git搭建局域网服务器
- iOS linker command failed with exit code 1 (use v to see invocation)
- 微信终端跨平台组件 Mars 系列(三)连接超时与IPPort排序
- Commons IO方便读写文件的工具类
- C语言中数组所占字节怎么算
- 最长公共子串(10分)
- 小米总参php面试题_小米2019年PHP工程师面试题和答案解析
- 北斗三号频点_解码北斗三号:和前两代卫星相比,它有何不同?
- 有哪些好用的低代码开发平台?
- Redis 雪崩,穿透,击穿
- 100人PJ?へへ。バージョン1.0の反省書を書かなければなりません、今日。
- 前端实战:教你写出简单的侧边栏功能以及返回顶部特效
- ADB logcat 过滤方法
- hive编程指南笔记
- 谷歌浏览器手动同步设置
- 苹果手机经常开低电量模式,对电池会有影响吗?
- 通俗易懂详解机器学习中的最大似然估计
- matlab怎么语音时域采样频谱,基于MATLAB的时域信号采样及频谱分析
- 数据中心网络高可用架构