首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS箭头函数三连问:为何用、怎么、何时

在现代JS中最让人期待的特性就是关于箭头函数,=>来标识。箭头函数有两个主要的优点:其一是非常简明的语法,另外就是直观的作用域和this的绑定。...什么才是箭头函数 JS箭头函数大概就像python中的lambda(python定义匿名函数的关键字)和ruby中的blocks(类似于闭包)一样。...,箭头函数并没有他们自己的执行上下文。...这里有一个函数上下文的例子,对于我们理解很有帮助。 曾经流行一种趋势,class类的语法和箭头函数,为其自动绑定方法。比如:事件方法可以使用,但是仍然绑定在class类中。...总结 箭头函数是JS语言中十分特别的属性,并且使很多情形中代码更加的变化莫测。尽管如此,就像其他的语言特性,他们有各自的优缺点。

2.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

js来实现那些数据结构12(散列表

这一篇文章说一下散列表hashMap的实现。那么为什么要使用hashMap?hashMap又有什么优势呢?hashMap是如何检索数据的?我们一点一点的来解答。   ...那么无论是array也好,object也好,栈还是队列还是列表或者集合(我们前面学过的所有数据结构)都需要遍历。不然我们根本拿不到我们想要操作的具体的元素。但是这样就有一个问题,那就是效率。...其实lose lose散列函数就是简单的把每个key中的所有字母的ASCII码值相加,生成一个数字,作为散列表的key。当然,这种方法并不是很好,会生成很多相同的散列值。...这啥没有啊。。。所以,我们需要解决这样的问题,我们这里介绍两种解决这种冲突的方法。分离链接和线性探查。 1、分离链接 分离链接,其实核心就是为散列表的每一个位置创建一个链表,并将元素存储在里面。...之前的例子,如果分离链接来解决冲突的话,那么看起来就是这个样子。 ?     那么我们就需要重写hashMap,我们来看看分离链接下的hashMap是如何实现的。

1.9K80

js来实现那些数据结构12(散列表

这一篇文章说一下散列表hashMap的实现。那么为什么要使用hashMap?hashMap又有什么优势呢?hashMap是如何检索数据的?我们一点一点的来解答。   ...那么无论是array也好,object也好,栈还是队列还是列表或者集合(我们前面学过的所有数据结构)都需要遍历。不然我们根本拿不到我们想要操作的具体的元素。但是这样就有一个问题,那就是效率。...其实lose lose散列函数就是简单的把每个key中的所有字母的ASCII码值相加,生成一个数字,作为散列表的key。当然,这种方法并不是很好,会生成很多相同的散列值。...这啥没有啊。。。所以,我们需要解决这样的问题,我们这里介绍两种解决这种冲突的方法。分离链接和线性探查。 1、分离链接 分离链接,其实核心就是为散列表的每一个位置创建一个链表,并将元素存储在里面。...之前的例子,如果分离链接来解决冲突的话,那么看起来就是这个样子。     那么我们就需要重写hashMap,我们来看看分离链接下的hashMap是如何实现的。

98120

JS箭头函数 什么时候 ,什么时候不能用,我总结出了4点

前言 大家好,我是zz,相信大家平时在码代码中,都知道箭头函数的用法,但是在面试中,让他讲讲箭头函数的用法,都讲的很片面,通过阅读本文,我们带大家系统的总结下箭头函数,形成自己的箭头函数的知识结构,这样在面试是面试官问到就小菜一碟...箭头函数的定义 箭头函数定义包括一个参数列表(零个或多个参数,如果参数个数不是一个的话要用 ( .. ) 包围起来),然后是标识 =>,函数体放在最后。...箭头函数与普通函数的区别 箭头函数 let arrowSum = (a, b) => { return a + b } 复制代码 普通函数 let zz = function(a, b){...return a + b } 复制代码 箭头函数的用法 我们打印fn函数的原型,我们会发现箭头函数本身没有this; var fn = (a, b) => { console.log(this,...没有super 连原型都没有,自然也不能通过 super 来访问原型的属性,所以箭头函数也是没有 super 的,不过跟 this、arguments、new.target 一样,这些值由外围最近一层非箭头函数决定

97800

最失败的 JavaScript 面试问题

这并非没有道理,这个主题确实是非常基础的,并且每天都被React、Vue、你的任何框架的开发者所使用。 小测验1:只有18%的正确答案 作为示例,我们选择了一个看似涵盖了这个主题所有方面的小测验。...上下文(Context) 关于上下文的问题甚至可能会难倒经验丰富的开发者。例如,只有29%的开发者解决了这个复杂但本质上很简单的任务。...解释: 箭头函数没有自己的 this。相反,箭头函数体内的 this 指向该箭头函数定义所在作用域的this 值。 我们的函数是在全局作用域中定义的。...解释: 对于具有复杂参数(解构、默认值)的函数,参数列表被封闭在其自己的作用域内。...因此,在函数体中创建 bar 变量不会影响参数列表中同名的变量,getBar() 函数通过闭包从其参数中获取 bar。

14720

JS 口袋书】第 8 章:以更细的角度来看 JS 中的 this

apply具有与call相同的效果,只是前者接受一个参数数组,而后者是参数列表。...bind仍然为给定的函数接受一个新的上下文对象,但它不只是新的上下文对象调用函数,而是返回一个永久绑定到该对象的新函数。...规则 4:"new" 绑定 构造函数模式,有助于JS封装创建新对象的行为: function Person(name, age) { this.name = name; this.age =...当然,这也是箭头函数最有趣的例之一。 总结 JS 中 this 是什么? 这得视情况而定。this 建立在四个规则上:默认绑定、隐式绑定、显式绑定和 “new”绑定。...大多数情况下,不希望与全局作用域交互,JS 为此就提供了一种严格模式来中和默认绑定的方法。在严格模式下,对全局对象的任何引用都是 undefined,这有效地保护了我们避免愚蠢的错误。

2.7K20

JavaScript中的thiscallapplybind

2.this 代表什么 this代表函数(方法)执行的上下文环境(上下文,类似与你要了解一篇文章,了解文章的上下文你才能清晰的了解各种关系)。...4.箭头函数中的this 箭头函数是ES6的新特性,最重要的特点是它会捕获其所在上下文的this作为自己的this,或者说,箭头函数本身并没有this,它会沿用外部环境的this。...也就是说,箭头函数内部与其外部的this是保持一致的。...]]]]); obj:这个对象将代替Function类里this对象 params:一串参数列表 说明:call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为...但是如果Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以call()方法来实现了,也就是直接指定参数列表对应值的位置Person.call

45110

一劳永逸地搞懂 JavaScript中‘this’

因此,在全局上下文中使用this.variable 会给我们那个变量的值。 在Node.js中: 如果你在Node.js环境中运行你的代码,情况会有所不同。...你可以标准函数、箭头函数,甚至加入一些 async-await 魔法来制作它。它们是这样的: // 经典的方式 (function () { console.log(“这是一个IIFE!”)...动态事件:手动设置 this 有时,你需要更多的控制,你可能想要指定 this 引用什么。对于这样的情况,我们有 bind 来拯救!...小心:箭头函数陷阱 快速提醒!记得我们之前关于箭头函数的聊天吗?即使在这里,它们与 this 的行为也是一致的。所以,如果你试图一个箭头函数来制作一个构造函数...好吧,期望一些怪癖。...如果需要,使用bind或箭头函数来确保正确的上下文。 构造函数和箭头函数:如前所述,箭头函数不绑定自己的 this。尝试使用它们作为构造函数可能会导致错误。

9410

在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现

上一章讲了后端部分的代码逻辑,传送门:在微信小程序上做一个「博客园年度总结」:后端部分 本章继续写一下小程序端的逻辑 因为前端涉及到一些交互效果,加上我对前端也不太熟悉,所以这部分会重点写一下我自己觉得比较好玩的地方 1、上下滑动切换页面效果...这其实是一个轮播图效果,通过上下滑动来切换页面 小程序中的 swiper 滑块视图容器,可以实现这个效果,官方文档: https://developers.weixin.qq.com/miniprogram...vertical="true" 表示滑动方向为纵向(小程序默认为横向滑动) bindchange 事件监听页面滑动,滑动时会触发,它绑定了函数swiperChange函数,后面会详细说下这个函数的作用 2、控制底部...条件控制一下 ,就可以显示不同的内容了 比如一共有6张轮播图,如果index5,就显示按钮 <view class="bottom_up" wx:if="{{...「非编程式导航」,这里我们<em>用</em>「编程式导航实现」 打开【年度封面】的wxml文件cnblogs_year_cover.wxml <button type="default" class

82940

前端面试之JavaScript

var && let && const ES6之前创建变量的是var,之后创建变量的是let/const 三者区别: var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。...箭头函数调用:箭头函数里面没有 this ,所以永远是上层作用域this(上下文) apply和call调用:函数体内 this 的指向的是 call/apply 方法第一个参数,若为空默认是指向全局对象...不同: apply和call传入的参数列表形式不同。...参考:☞ call、apply、bind三者的用法和区别 箭头函数的特性 箭头函数没有自己的this,会捕获其所在的上下文的this值,作为自己的this值 箭头函数没有constructor,是匿名函数...因此可以利用__proto__一直指向Object的原型对象上,而Object原型对象Object.prototype.__ proto__ = null表示原型链顶端。如此形成了js的原型链继承。

73420

JS 中 this 在各个场景下的指向

从ES6开始,JS 允许class关键词来定义构造函数 class City { constructor(name, traveled) { this.name = name; this.traveled...JS中的函数是第一类对象,这意味着函数就是对象,对象的类型为Function。从函数对象的方法列表中,.call()和.apply()用于调用具有可配置上下文的函数。...箭头函数中的this this 定义箭头函数的封闭上下箭头函数不会创建自己的执行上下文,而是从定义它的外部函数中获取 this。 换句话说,箭头函数在词汇上绑定 this。 ?...其他上下文的隐式调用(通过 get.call([0])或get.apply([0]))或者重新绑定(通过.bind())都不会起作用。 箭头函数不能用作构造函数。...陷阱: 箭头函数定义方法 你可能希望使用箭头函数来声明一个对象上的方法。

4.4K10

15个 Vue.js 高级面试题

渲染项目列表时,“key” 属性的作用和重要性是什么? 渲染项目列表时,key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。...如果没有使用 key 属性,并且列表的内容发生了改变(例如对列表进行排序),则虚拟 DOM 宁愿使用更新的数据来修补节点,来反映更改,而不是上下移动元素。这是默认模式,非常有效。...为了确保代理并可以从组件中访问它,可以配置 vue.config.js 文件并包含 devServer 部分,如下所示: 在 vue.config.js 文件中: module.exports: {...之后 firebase 函数可在程序结构中的任何位置的 this 上下文中使用。 9. 什么是渲染函数?举个例子。...在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时,为什么不使用箭头函数? 箭头函数自己没有定义 this 上下文,而是绑定到其父函数的上下文中。

2.9K20

那些年苹果做错的设计

11.邮件详情界面,iOS10左右箭头映射上一封下一封,不如iOS9用上下箭头映射上一封下一封邮件自然直观,更容易让用户理解。 iOS邮件列表,新的邮件在列表上方,较旧的邮件在新的邮件下方。...iOS10的邮件详情中,左右箭头表示下上封邮件。向左的箭头给用户的暗示是返回,可以理解为返回时间较早的一封邮件,即列表下一封邮件。向右的箭头表示前进,理解为去查看较新的一封邮件,即列表上一封邮件。...左侧箭头—>上一封旧邮件,右侧箭头—>下一封新邮件,但此种对应,与邮件列表中,新邮件在上,旧邮件在下,是一个很糟糕的映射关系,增加了用户的认知负担,用户很难理解,为何点击左侧箭头,会跑到了列表下一封邮件...iOS9的邮件详情,用上下箭头控制上一封,下一封邮件就好理解多了。点击向上箭头,去到该邮件列表上一封邮件,点击向下箭头,去到该邮件列表下一封邮件。...上下箭头点击后的去处,更符合“自然映射”,与邮件列表中的邮件顺序映射关系比左右箭头容易理解多了。 有一个正面的案例 Google在通知详情中,通过上下箭头指示去到上一封通知,或下一封通知。

82530
领券