es6中箭头函数和this指向
箭头函数相当于匿名函数,简化了函数定义。
箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和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中箭头函数和this指向的更多相关文章
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- ES6中箭头函数与普通函数this的区别
普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...
- es6中箭头函数 注意点
var aaabbb = 'kkkooo' setTimeout(()=>{ var aaaa = 'kkkk'; console.log(this) },1000); 因为据我了解,箭头函数指 ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
- 箭头函数的this指向
es6的箭头函数中this指向是跟普通function中的this指向不同的,普通function的this指向取决于调用function的对象, 而箭头函数的this指向取决于声明它的对象,看下面这 ...
- es6的箭头函数和es5的function函数区别
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
- 箭头函数的this指向问题-一看就懂
OK,对于箭头函数的this 用一句话概括:箭头函数中的this指向的是定义时的this,而不是执行时的this. 如果上面这句话听的是懂非懂或者完全不懂的,没关系,下面会有案例讲解. 举个栗子 来看 ...
- 关于ES6 用箭头函数后的 this 指向问题
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开 () => { console.log('箭头函数的this是指向哪的问题')}; var ...
随机推荐
- java方法的笔记
方法 方法的概念 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可以运行的,需要手动 ...
- Python的入门学习Day 25~27——form”夜曲编程“
Day 27 time: 2021.8.24. 时流轻快,转眼间就载着我到达了学习Python的第27个日子.一开始,我还以为本次学习的全程对我而言小菜一碟--但,当我亲自走过以后,发现这些进步, ...
- 解决命令行窗口执行godoc报错
在cmd命令行窗口执行godoc报错: 'godoc' is not recognized as an internal or external command,operable program or ...
- 解决504 GATEWAY TIMEOUT Nginx网关超时
最近遇到一个问题504 GATEWAY TIMEOUT的问题,在浏览器的NetWork里面看是这个效果.时间大概是60s. 修改nginx配置 目前后端技术架构主要是nginx和php-fpm,前端主 ...
- vscode将本地代码实时同步到服务器
vscode近些年变得越来越流行了,主要是IDEA用上去实在有点卡,机器卡崩溃几次,这段时间也想用vscode体验一下,在自己的一些项目上面,想实现像phpstorm或者goland那样直接把代码通过 ...
- 路由器、集线器、交换机分别工作在OSI七层协议模型的哪一层
路由器三层(网络层): 集线器一层(物理层): 普通交换机二层(数据链路层). 现在也有工作在第三层的交换机. OSI七层网络模型由下至上为1至7层,分别为物理层(Physical layer),数据 ...
- Xmind 8 pro 破解版详细安装教程
写在前面的废话: 本来网上就有很多破解版的Xmind,也有安装教程,为什么我还要多此一举做这个教程呢? 因为实际安装后,使用起来总会有各种小瑕疵,最烦人的问题就是,xmind文件和软件无法关联,双击x ...
- git 修改 .gitignore 不生效
在使用 Git 时候,发现在 .gitignore 文件中添加内容后,推送成功后并没有生效. 出错原因: .gitignore 文件的内容不对历史文件生效 情景复现: 1. 远端已经有了 .idea ...
- protobuf如何还原proto源文件及描述字符串中左括弧的意义
语法分析 和通常的有语法的结构一样,proto的编译也经过词法(tokenize)和语法(parse)两个阶段,相关代码分别在tokenizer.cc和parser.cc两个文件中. /// @fil ...
- 权昌TSC条码打印机终极使用教程与开发版本代码大全
本教程使用的打印机型号:TSC TTP-244 Plus 官方文档 一.TSC打印机安装 1.机器安装 根据官方快速安装指南安装打印机,此处不详细说明,也可以看视频教程,唯一需要注意的地方就是碳带的方 ...