首页 > 其他分享 >es6中箭头函数

es6中箭头函数

时间:2022-09-05 13:23:58浏览次数:71  
标签:es6 调用 函数 指向 对象 箭头 上下文

箭头函数相当于匿名函数,简化了函数定义。

 

箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和return。

另一种是包含多条语句,不可以省略{}和return。

 

特点

箭头函数最大的特点就是没有this,所以this是从外部获取,就是继承外部的执行上下文中的this,由于没有this关键字所以箭头函数也不能作为构造函数, 同时通过 `call()` 或 `apply()` 方法调用一个函数时,只能传递参数(不能绑定this),第一个参数会被忽略。

箭头函数也没有原型和super。不能使用yield关键字,因此箭头函数不能用作 Generator 函数。不能返回直接对象字面量。

 

 

箭头函数的不适用场景:

定义对象上的方法 当调用` dog.jumps` 时,`lives` 并没有递减。因为 `this` 没有绑定值,而继承父级作用域。 var dog = { lives: 20, jumps: () => { this.lives--; } }

不适合做事件处理程序 此时触发点击事件,this不是button,无法进行class切换 var button = document.querySelector('button'); button.addEventListener('click', () => { this.classList.toggle('on'); });

 

箭头函数函数适用场景:

简单的函数表达式,内部没有this引用,没有递归、事件绑定、解绑定,适用于map、filter等方法中,写法简洁 var arr = [1,2,3]; var newArr = arr.map((num)=>num*num)

内层函数表达式,需要调用this,且this应与外层函数一致时

let group = { title: "Our Group", students: ["John", "Pete", "Alice"], showList() { this.students.forEach( student => alert(this.title + ': ' + student) ); } };

group.showList();

 

 

 

this关键字由来:在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点,基于这个需求,JavaScript 又搞出来另外一套 this 机制。

 

 

this存在的场景有三种:全局执行上下文和函数执行上下文和eval执行上下文,eval这种不讨论。

在全局执行环境中无论是否在严格模式下,(在任何函数体外部)`this` 都指向全局对象。

在函数执行上下文中访问this,函数的调用方式决定了 `this` 的值。在全局环境中调用一个函数,函数内部的 this 指向的是全局变量 window,通过一个对象来调用其内部的一个方法,该方法的执行上下文中的 this 指向对象本身。

 

 

普通函数this指向:当函数被正常调用时,在严格模式下,this 值是 undefined,非严格模式下 this 指向的是全局对象 window;通过一个对象来调用其内部的一个方法,该方法的执行上下文中的 this 指向对象本身。new 关键字构建好了一个新对象,并且构造函数中的 this 其实就是新对象本身。嵌套函数中的 this 不会继承外层函数的 this 值。

箭头函数this指向:箭头函数并不会创建其自身的执行上下文,所以箭头函数中的 this 取决于它的外部函数。

 

箭头函数因为没有this,所以也不能作为构造函数,但是需要继承函数外部this的时候,使用箭头函数比较方便

标签:es6,调用,函数,指向,对象,箭头,上下文
From: https://www.cnblogs.com/yueyiviolet/p/16657750.html

相关文章

  • 9.构造函数和析构函数
    文章内容构造函数和析构函数的由来?构造函数和析构函数的基本语法C++编译器构造析构方案PK对象显示初始化方案构造函数的分类以及调用默认的构造函数构造函数调用......
  • JS实现异步的方法:回调函数callback、事件监听、setTimeout、Promise、生成器Generato
    所有异步任务都是在同步任务执行结束之后,从任务队列中依次取出执行。回调函数是异步操作最基本的方法,比如AJAX回调,回调函数的优点是简单、容易理解和实现,缺点是不利于代码......
  • 基于IDL用户函数的波段运算
    ENVI 提供对 IDL 程序的访问的功能,可以使用内置的IDL 函数或者用户自定义IDL函数。这些函数要求它们接受一个或多个图像阵列作为输入,并且输出一个与输入波段具有相同行......
  • 有理函数积分
           ......
  • 普通函数、构造函数和匿名函数,以及手写callback回调函数
    回调函数functionpublic(callback){console.log("公共函数被调用");if(typeof(callback)=="function"){console.log(typeof(callback));callback()}//try......
  • python 下载url函数
    importrequestsimportshutildefdownload_file(url,local_filename):""":paramurl:url连接:paramlocal_filename:下载后保存文件名字"""......
  • 关于反三角函数及其导数
    关于反三角函数及其导数三角函数和反三角函数,在几何意义上,是x和y互换。三角函数里面,自变量x是角度,y是三角函数对x的运算结果。反三角函数里面,自变量x是针对某个角度y做......
  • 【JS每日一题】Array.reduce函数
    题目题目来源于前端面试题宝典[[0,1],[2,3]].reduce((acc,cur)=>{returnacc.concat(cur)},[1,2])解析[1,2]会作为初始值首次放入到第一个参数......
  • vue3——hook函数
    什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂......
  • postgresql/lightdb CommandCounterIncrement()函数的作用
    CommandCounterIncrement的作用是使当前事务中前面语句的修改对本语句可见,相当于oracle中的当前读概念(currentread,只不过oracle区分,pg不区分)。事务中每执行一个语句后......