ES6新特性---箭头函数、this、对象字面量的增强

最新推荐文章于 2023-05-09 13:08:33 发布
最新推荐文章于 2023-05-09 13:08:33 发布
阅读量326 收藏
点赞数
分类专栏： 再次遇见ECMAScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43926840/article/details/106570224
版权

箭头函数

箭头函数实际上是简化了函数表达式的定义方式，允许我们使用=>来定义函数，一来简化了定义，二来对了一些新特性。
以往我们定义函数需要用function 去定义函数，现在我们完全可以用箭头函数来定义一个相同的函数。
在这里插入图片描述
箭头的左边为参数列表，右边则为函数体，在这里只有一句表达式，所以就会作为返回值返回，加入需要执行多条语句，同样可以使用花括号去包裹，这时候返回值则需要手动返回。
箭头函数的存在使得回调函数的编写得到了简化。
在这里插入图片描述

箭头函数与this

在这里插入图片描述
如图所示，在箭头函数中并不能取到name的值，这是箭头函数和普通函数最大的区别。因为在箭头函数中没有this的机制，所以不会改变this的指向，也就是说，这个this在箭头函数外面是什么，那么在函数里面this拿到的就是什么。

下面以一个小例子对于该场景的另一情况做演示。
在这里插入图片描述
如图所示，在普通函数底下的普通函数无法通过this拿到第一层普通函数下的this，而箭头函数则可以，因为箭头函数里面this指向的是箭头函数外层中的this指向。

对象字面量的增强

  1. 变量属性名一样的情况下，变量可以省略
  2. 给对象添加方法，可以省略function，可以直接方法名（）：{ }
  3. 可以使用表达式的返回值作为对象的属性名
    在这里插入图片描述
花生酱与果酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ES6新增语法 - 理解箭头函数中的this关键字
Codefreyy
04-03 237
关键知识点 箭头函数不绑定this,箭头函数没有自己的this关键字 如果在箭头函数中使用this，this关键字将指向箭头函数被定义位置中的this 注意：箭头函数里this指向的是定义时所在的对象，而不是使用时所在的对象 例子 function fn() { console.log(this); //输出obj对象 return() => { console.log(this);
es6-for-everyone
05-02
**增强型对象字面量** - 在对象字面量中可以直接定义方法，如 `{name: 'John', sayHello: () => console.log('Hello!')}` - 可以使用计算属性名，如 `let key = 'firstName'; let obj = {[key]: 'John' };` ### ...
ES6中的一些新特性，一篇就够了
热门推荐
qq_56966124的博客
04-19 39万+
总结： var let const的区别 数组新增拓展 对象新增拓展 函数新增拓展 Set 和Map Promise Generator Proxy Module Decorator 具体介绍： 1.var let const 一、var 1、在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量： 顶层对象，在浏览器环境指的是window对象，在Node指的是global对象 2、使用var声明的变量存在变量提升的情况 ...
php 对象字面量,ES6中增强的对象字面量的简单介绍
weixin_33220713的博客
03-13 83
本篇文章给大家带来的内容是关于ES6中增强的对象字面量的简单介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。概述在es6中，对象字面量的语法被增强了更短的属性声明如果属性的属性名和属性值引用的变量名一致，可以直接省略let name="jack"// es6之前var obj={name:name} // {name:"jack"}// es6let obj={name} /...
【前端面经】ES6-ES6 有哪些新特性?
欢迎光临~
05-09 1817
对象字面量增强是一种更简洁的定义对象的方式，可以使用简洁的语法来定义对象的属性和方法。例如可以使用变量来作为对象属性的名称，同时也可以使用箭头函数来定义对象的方法。Set 和 Map 是两种新的数据结构，可以用来存储唯一的值和键值对。可以通过解构赋值来快速获取数组或对象中的值，同时也可以用来交换变量的值。模板字符串是一种新的字符串语法，可以使用反引号 `` 来定义字符串，同时可以在字符串中插入变量或表达式，使用。声明的变量具有块级作用域，可以避免变量提升问题，同时也可以避免命名冲突和变量覆盖的问题。
ES 规范中this问题说明
LZ的博客
04-09 897
在方法中使用this的时候，this所代表的对象究竟是谁这一直是一个很头疼的问题，尤其是在层次的嵌套调用中。这里有一个详解this原理的文章，可以细看 http://jiangwen.site/2017/11/27/YouDontKonwJS/ 我总结几个比较重要的点： 1.最基础的就是被谁调用的，基本上this的指向就是谁 一般最困难得就是在嵌套中不理解究竟是谁调用的函数，出现丢失上下文...
es6-Girls-reminder-
05-09
8. **增强型对象字面量**： - 直接在对象字面量中定义方法，如 `{name: 'Alice', sayHello: () => console.log('Hello!')}` - 属性简写，如 `let x = 10; {x}` 等同于 `{x: x}`。 9. **Promise**： - Promise...
es6-examples:ES6示例-Javascript新手
05-16
11. **增强的对象字面量** 在对象字面量中可以直接定义方法和计算属性名，如 `let obj = { [key]: value, method() {} };` 在实际学习过程中，可以通过安装依赖项并运行测试来加深理解。例如，在这个"es6-examples...
es6-before-after:未来就在眼前……使用 ES5
06-27
ES6中的模板字符串（`模板字面量`）用反引号（`）包围，可以内联表达式，使用`${expression}`嵌入变量，增强了字符串处理能力。 **8. Promise** Promise是异步编程的一种解决方案，它代表一个将来可能完成或失败的...
ES6入门基础-阮一峰
04-10
7. **增强的对象字面量** 对象字面量可以使用简写属性名、计算属性名和方法，使创建和操作对象更加简洁。 8. **Promise 对象** Promise 是用于处理异步操作的工具，解决了回调地狱问题，提供了链式调用的解决方案...
This关键字和ES6新特性
weixin_43989621的博客
08-12 244
This关键字与ES6新特性 一、this关键字 每一个函数内部都有一个关键字 this 可以让我们直接使用的 函数内部的this 指向谁，取决于函数的调用方式 全局定义的函数调用，this =>window function fn(){ console.log(this) } fn() //此时this指向window 对象内部的方法调用this = >调用者 var obj = { fn:function (){ console.log(
ES6新特性 JS 箭头函数 普通函数 this指向问题
沉淀在网页的博客
01-20 316
普通函数的this 普通函数的 this 就是调用对象 let x = 111; let obj = { x: 222, f() { console.log(this); } }; obj.f(); /* ...
深入理解ES6箭头函数中的this
liwusen的博客
04-20 3万+
简要介绍：箭头函数中的this，指向与一般function定义的函数不同，比较容易绕晕，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。 1、何为定义时绑定 我们来看下面这个例子： （1） var x=11; var obj={ x:22, say:function(){ console.log(this.x) } }...
ES6箭头函数中返回对象字面量
03-28 2704
//加括号的函数体返回对象字面表达式： 参数=> ({foo: bar}) 记住：在ES6中用params => {object:literal}这种简单的语法返回对象字面量是行不通的。 需要用圆括号把对象字面量包起来 var func = () => ({foo: 1}) 注意：箭头函数在参数和箭头之间不能换行。 ...
es6中箭头函数this指向问题
梁婉玲krysliang的博客
01-04 499
普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据所在的环境（我在哪个环境中，this就指向谁） 看下面的例子 document.onclick = function () { alert(this); //HTMLDocument } document.onclick = () => { alert(this); //Window   再看下下面的...
对象、构造对象、字面量、this
2c不高兴的博客
02-19 1万+
// 对象定义：带有属性和和方法的一种特殊的数据的集合 // 属性：可以获取或者设置的叫属性 // 方法：可以被执行的叫方法 // 对象的特点： 封装 继承 多态 // delete(dog.color) 删除属性的值， 在内存中属性还在， 值不在了 // // 操作属性的方式： // . // [] // 遍历对象： /...
ES6中箭头函数的this指向和注意事项
weixin_44526436的博客
10-17 627
先说结论： 箭头函数this指向： 箭头函数没有this指向，箭头函数内部的this只能通过查找作用域链来确定 箭头函数使用注意事项： 使用箭头函数，函数内部没有arguments 箭头函数不能使用new 关键字来实例化对象。 箭头函数this指向 例子： let pageHandle = { id:123, init:function(){ document.addEventListener
简单学习Es6中的this指向
憧憬个人博客
01-19 2090
前言对于一个前端初学者来说，this的指向是一个必须要掌握的知识点，尤其是es6之后的this指向更加变得飘忽不定，我们今天就来了解一下各种情况下this的指向。什么是this首先，this不是一个函数也不是某个对象，它具体指向什么东西取决于我们在哪里去调用这个this，只有函数调用的时候才会发生this的绑定1.全局作用域console.log(this ===...
前端面试 - JS总结（2） - ES6 (let, 箭头函数, this) 作用域 闭包
Sabrina_cc的博客
09-22 837
一、ES6新特性 let const \ var 模板字面量和类的支持 简洁 箭头函数 简化了函数的书写 Promise 处理异步操作的一种模式 字符串模板（反引号）不参与浏览器解析，只要最后根据模板生成的结构和命名符合HTML规范即可 For of值遍历 每次循环它提供的不是序号而是值。 二、let 和 const es5有两种声明变量的方法：var, function es6有6种声明变量的方法：var, function, let, const, import, cla...
es6 新特性有哪些
最新发布
07-29
2. 箭头函数：使用箭头函数可以更简洁地定义函数，并且使用this时不需要关心上下文问题。 3. 模板字符串：使用反引号（`）可以定义一个模板字符串，其中可以包含表达式和字符串字面量，并且可以换行。 4. 解构赋值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值