📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 特性
  • 语法
  • 箭头函数的this
  • 箭头函数的arguments
  • 使用 new 操作符
  • 使用prototype属性
  • 使用 yield关键字
  • 修复缺陷
在GitHub上编辑
  1. 前端技术
  2. javaScript
  3. ES6

箭头函数

箭头函数是匿名函数,语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

引入箭头函数有两个方面的作用:更简短的函数并且不绑定this。

特性

  • 没有自己的this

  • 没有自己的argument

  • 没有prototype属性

  • 没有super或new.target

  • yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。

  • 不能当作构造函数,不能进行new操作

语法

一般语法

(param1, param2, …, paramN) => { statements } 

当只有一个参数时,圆括号是可选的,下面两种都对。

param1 => { statements } 
(param1) => { statements } 

如果没有参数时,需要保留圆括号。

// 没有参数的函数应该写成一对圆括号。
() => { statements }

另外还有一些简写写法

(param1, param2, …, paramN) => expression
//相当于:
(param1, param2, …, paramN) =>{ return expression; }

建议无论是否只有一个参数,都保留圆括号(方便以后添加参数或删减参数)

高级语法:

//加括号的函数体返回对象字面量表达式:
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数的this

而箭头函数不会创建自己的this,它的this是在定义函数的时候绑定的,它只会在自己的作用域链向外逐层地查找,找到最近的普通函数的this对象(类似查找变量),然后继承这个this

被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变.并且在箭头函数this对象的指向是不能直接改变的。

function fn1(){ // 第一层普通函数
    console.log(this); // window
    let obj1 = { // 第二层对象
        fn2: () => { // 第三层箭头函数
            console.log(this); // window
        }
    }
    obj1.fn2();
}
fn1()

fn1是普通函数,它的this指向全局对象window,而fn2是一个箭头函数,它被嵌套在fn1的obj1对象内,它继承了fn1的this,因此箭头函数的this也指向window。

当箭头函数的作用域链都没有能继承的this时,它的指向是全局对象。如下

let arrow = () => {
     console.log(this);
  }
arrow() // window对象
    let o1 = {
        o2: {
            arrow: () => {
                console.log(this);
            }
        }
    }
    o1.o2.arrow() // window对象

上面代码中箭头函数都无法在祖先作用域中找到能继承的this,因此无论是否在严格模式下都会指向window,下面把o2改成一个普通函数(拥有自己的this),此时箭头函数能找到继承的this,于是指向。

let o1 = {
    o2(){
        console.log(this); // o2对象
        let arrow = () => {
            console.log(this);
        }
        arrow()
    }
}
 o1.o2() // o2对象

箭头函数的arguments

箭头函数没有自己的arguments,直接使用会报错

let fn1 = (a) => {
    console.log(arguments);
}
fn1("a")
// Uncaught ReferenceError: arguments is not defined

但是和this一样,它能继承普通函数的arguments

function fn1(a,b){
    console.log(arguments); // Arguments(2){...}
    let arrow = () => {
        console.log(arguments); // Arguments(2){...}
    }
    arrow()
}
fn1("a","b")

在大多数情况下,使用剩余参数是相较使用arguments对象的更好选择。

使用 new 操作符

箭头函数不能用作构造器,和 new一起用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

使用prototype属性

箭头函数没有prototype属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

使用 yield关键字

yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。

修复缺陷

由于Javascript的设计缺陷,在非严格模式下,在函数内部定义的函数 this 指向window,严格模式下,this为undefined。

let oTest = {
    fn(){
        let fnTest = function(){
            console.log(this);
        }
        fnTest();
    }
}
oTest.fn(); // window对象

而箭头函数则完全修复了这个缺陷。只需要把上述代码修改成箭头函数即可。

let oTest = {
    fn(){
        let fnTest = function(){
            console.log(this);
        }
        fnTest();
    }
}
oTest.fn();
上一页模块化下一页你不知道的for...of

最后更新于3年前