0

0

ES6箭头函数及this指向详解

WBOY

WBOY

发布时间:2022-08-08 10:43:02

|

1862人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了箭头函数以及this指向的相关问题,普通函数中的this表示调用此函数时的对象。而箭头函数是没有自己的this的,箭头函数里面的this会继承自外部的this,下面一起来看一下,希望对大家有帮助。

ES6箭头函数及this指向详解

【相关推荐:javascript视频教程web前端

1.箭头函数

用箭头 => 定义函数

 var fn = function(num){
    return num;}var fn1 = (num)=>num;var fn3 = ()=>1;var  fn4 = (num1,num2,num3)=>num

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

        var func = (a,b)=>{
            return a+b;
        }

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

var func = (a,b)=>{name:a,age:b} //报错var func4 = (a,b)=>{
    return {
      name: a,
      age :b   } } // 不报错

箭头函数还有一个更主要的作用: 解决this的指向问题。

2.this指向

先说一下普通函数中的this,普通函数中的this表示调用此函数时的对象。而箭头函数是没有自己的this的,箭头函数里面的this会继承自外部的this。或者用代码

块的概念解释会更加直观:箭头函数中的this就是外层代码块的this。举一个例子:

在这里插入图片描述

在这里插入图片描述

箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。

使用箭头函数时要注意一下几点:

  • 箭头函数不能用作构造函数,用的话会抛出一个错误
  • 无法使用arguments参数,如果要用的话就用rest
  • 无法使用yield命令,所以箭头函数无法用作Generator函数
  • 因为没有自己的this,所以没法通过bind、call、apply来改变this指向
  • 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制
  • 箭头函数的this从外层代码库继承,所以箭头函数的this是在定义的时候就绑定好了的,而普通函数是在调用的时候确定this指向
  • 字面量对象中直接定义的箭头函数的this不绑定该对象,而是往外找一层,最简单的情况是绑定到window

PS: 实际开发环境中,React可以使用箭头函数解决一个经典问题,这里不细说了。

给一个例子看一下箭头函数的实际情况:

Python精要参考 pdf版
Python精要参考 pdf版

这本书给出了一份关于python这门优美语言的精要的参考。作者通过一个完整而清晰的入门指引将你带入python的乐园,随后在语法、类型和对象、运算符与表达式、控制流函数与函数编程、类及面向对象编程、模块和包、输入输出、执行环境等多方面给出了详尽的讲解。如果你想加入 python的世界,David M beazley的这本书可不要错过哦。 (封面是最新英文版的,中文版貌似只译到第二版)

下载
const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  fun3: () => {
    console.log(this);
  }
}

let f1 = obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

针对每行输出的分析:

let f1 = obj.fun1() // obj

这里明显进行的是隐式绑定,fun1的this指向obj

f1() // obj

这里执行了上一行返回出来的箭头函数,我们分析上一层代码库的this指向obj,所以直接继承,箭头函数this指向

objlet f2 =obj.fun2()

fun2第一层执行的时候没有打印代码,而是返回了一个函数出来,赋值给f2,并且这里发生了绑定丢失,this指向由原来的obj指向了window(发生了赋值)

let f2_2 = f2() // window

f2()执行了,打印出了改绑后的this——window,然后将箭头函数返回出来,赋值给f2_2f

2_2() // window

执行打印出window,刚才的外层代码的this不是指向了window吗,所以这里就继承了window作为this

obj.fun3() // window

在字面量中直接定义的箭头函数无法继承该对象的this,而是往外再找一层,就找到了window,因为字面量对象无法形成自己的一层作用域,但是构造函数可以哦。

那我们怎么操纵箭头函数的this指向呢:

答案是修改外层代码库的this指向,在箭头函数定义之前就给this修改方向即可。

在以上代码的基础上:

let fun4 = f2.bind(obj)() // obj
fun4() // obj

我们发现修改的是第二层方法的this指向,并且箭头函数也继承了下来。

  fun2: function () {
    return function () { // 我们修改的是这里的this
      console.log(this);
      return () => { // 然后这里定义的时候就继承啦
        console.log(this);
      }
    }
  },

【相关推荐:javascript视频教程web前端

相关文章

相关标签:

es6

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ECMAScript6 / ES6---十天技能课堂
ECMAScript6 / ES6---十天技能课堂

共25课时 | 1.9万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.6万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号