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

箭头函数在AJAX onload中不起作用。但是如果我把它写成一个普通的函数,那么它就能工作

箭头函数在AJAX onload中不起作用的原因是箭头函数没有自己的this值,它会继承外层作用域的this值。而在AJAX onload回调函数中,this指向的是XMLHttpRequest对象,而不是期望的调用者。因此,箭头函数无法正确地访问到期望的this值。

如果将箭头函数改写为普通的函数,则可以解决这个问题。普通函数会根据调用方式来确定this的值,因此可以正确地访问到期望的this值。

以下是一个示例代码:

代码语言:txt
复制
function handleResponse() {
  // 在这里处理响应
}

function makeRequest() {
  var xhr = new XMLHttpRequest();
  xhr.onload = handleResponse;
  xhr.open('GET', 'https://example.com/api', true);
  xhr.send();
}

在上述代码中,handleResponse函数被作为普通函数传递给xhr.onload属性,这样在AJAX请求完成后,handleResponse函数将被调用,并且可以正确地访问到期望的this值。

关于箭头函数和普通函数的区别,可以参考腾讯云的JavaScript函数介绍:JavaScript函数 - 腾讯云

注意:以上答案中没有提及具体的腾讯云产品,因为题目要求不提及云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

起来,前端还没倒下,不能睡

虽然一天工作头昏脑胀,但是仍然放不下心心念念前端啊,扶起来,还可以学~ 学习喜欢事情,也是一种放松,come on! 上篇文章讲了 Vue 一些基础概念,语法。今天上些难度。...,从而做相应操作,侦听属性是一个对象,键是要监听对象或者变量,值一般是函数,当你侦听元素发生变化时,需要执行函数,这个函数有两个形参,第一个是当前值,第二个是变化后值。...-- v-bind --> 过滤器实际上是一个函数,可以一个组件选项定义组件内部过滤器: filters:{...,const定义变量是常量 alert(iNum01) alert(iNum02); alert(iNum03); 6.2 箭头函数 可以箭头函数理解成匿名函数第二种写法,箭头函数作用是可以在对象绑定...,之前做 js 模块化开发,是用一些 js 库来模拟实现 ES6 中加入了模块功能,和 python 语言一样,python 中一个文件就是一个模块,ES6 一个 js 文件就是一个模块,

81310

装饰者模式

如果使用继承方式来给每种相机创建子类,则需要4×3=12个子类。 但是如果镜头、滤镜和挂带这些对象动态组合到相机上面,则只需要额外增加3个类。...而且多人协作,我们总是不愿意去动别人写东西。也许实现某个功能逻辑躺在某个阴暗杂乱角落。你拿出来暴晒,可能会动了整个架构老命。 这时候你要加功能,用个高阶函数包裹即可。...工作请求分别转发给新添加函数和原函数,且负责保证它们执行顺序,让新添加函数函数之前执行(前置装饰),这样就实现了动态装饰效果。...案例1:window.onload改造 众所周知,window.onload只会执行一次。如果你要二次调用,怎么处理? 最原始方法就是原来onload追加。太low了。...成为一个即插即用函数甚至可以被写成配置文件形式,这有利于我们分开维护这两个函数

53910

Bookmarklet编写指南

前一段日子,写了两个Bookmarklet----"短网址生成"和"短网址还原"。 它们用起来很方便,除了本人之外,其他朋友也在用。第一次发布Bookmarklet,就能有用户,挺满意。...通常在网页以链接形式出现,就像下面这样: xxx 用户直接这个链接拖到地址栏或收藏夹就可以用了。...二、Bookmarklet优点 它有几个很显著优点,其他技术难以取代: 1. 安装快速   Bookmarklet安装,就是收藏夹中保存一段代码,一步就能完成。所有浏览器都原生支持。 2....如果正确,同样一个Bookmarklet各种浏览器上都能正常使用。 三、Bookmarklet编写规则 1....添加外部函数如果Bookmarklet需要用到外部函数库,就必须它也加进来。但是,前提是必须先检查一下,看看原页面是否已经加载了这个函数库。 下面以加载jQuery为例:   if (!

1.5K90

前端学习笔记—JavaScript和jQuery

当我们用 function 关键字定义一个函数时,实际上是创建了一个函数对象,而不是通过构造函数实例化得到函数体内部可以用arguments对象关键字获取到当前整个函数实参数组。...函数 JavaScript 是第一类公民(first-class citizen),它们可以被赋值给变量、作为参数传递给其他函数,甚至可以在他函数作为返回值返回。...JavaScript分为函数对象和普通对象 ,每个对象都有proto属性,但是只有函数对象才有prototype属性,prototype属性就是函数原型对象。...注意:所有对象都有一个内部[[Prototype]]链接,但proto属性是一个非标准某些环境可用方式来访问这个链接。...浏览器,DOMHTML分析器将一个页面转换成一个对象模型集合,通常称为DOM树。浏览器通过对这个DOM对象模型操作来线上HTML页面。

11510

JavaScript this 使用技巧总结

setTimeout 一个坑 之前啊说过,如果直接执行回调函数而没有绑定作用域,那么 this 是指向全局对象(window),严格模式下会指向 undefined,然而在setTimeout...我们可以看到当作构造函数调用时,this 指向了这个构造函数调用时候实例化出来对象; 当然,构造函数其实也是一个函数如果我们当作一个普通函数执行,这个 this 仍然执行全局: ?...箭头函数 ES6 新规范,加入了箭头函数普通函数最不一样一点就是 this 指向了,还记得我们使用闭包来解决 this 指向问题吗,如果用上了箭头函数就可以更完美的解决了: ?...可以看到, setTimeout 执行函数,本应该打印出在 Window,但是在这里 this 却指向了 obj,原因就在于,给 setTimeout 传入函数(参数)是一个箭头函数函数体内...可以看到,虽然指定 this 不起作用但是传入参数还是起作用了; 为箭头函数指定 this 我们来定义一个全局下箭头函数,因此这个箭头函数 this 必然会指向全局对象,如果用 call 方法改变

86030

翻译连载 |《你不知道JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 第 3 章:管理函数输入

如果代码某一处只获取了部分实参,然后另一处确定另一部分实参,这个时候柯里化和偏应用就能派上用场。 另一个最能体现柯里化应用是,当函数只有一个形参时,我们能够比较容易地组合它们。...函数一个对 Haskell 柯里化可靠改编,叫做 “严格柯里化”。...虽然某些库,反柯里化使函数变成和原函数(译者注:这里函数指柯里化之前函数)类似的函数但是凡事皆有例外,我们这里就有一个例外。...如果你传入原函数期望数量实参,那么反柯里化后,函数行为(大多数情况下)和原函数相同。然而,如果你少传了实参,就会得到一个仍然等待传入更多实参部分柯里化函数。...如果你有个类似我们前面提到被松散柯里化函数,它能接收多个实参,但你却想让接收单一实参。那么这就是想说情况。 我们可以设计一个简单实用函数包装一个函数调用,确保被包装函数只接收一个实参。

1.5K70

ES6 Promise 详解

就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件特点是,如果你错过了,再去监听,是得不到结果。...简单来说,Promise 就是用同步方式写异步代码,用来解决回调问题 then()方法 then 方法就是原来回调写法分离出来,异步操作执行完后,用链式调用方式执行回调函数。...}).then(function(result){ 20 console.log(result) 21 }); 22 23 //推荐使用箭头函数写成...一个作用是,当执行 resolve 回调(也就是上面 then 一个参数)时,如果抛出异常了(代码出错了),那么也不会报错卡死 js,而是会进到这个 catch 方法。...我们将它们一起放在 race 赛跑。 28 //如果 5 秒内图片请求成功那么便进入 then 方法,执行正常流程。

58820

【ECMAScript6】es6 要点(二)Promise | 自个写一个Promise | Generator | AsyncAwait

Promise:一种解决回调问题技术 首先我们要理解同步与异步含义: 同步:函数执行时会阻塞调用者,并在执行完毕后返回结果。 异步:函数执行时不会阻塞调用者,但是一旦执行完毕就会返回结果。...next()函数,从Generator实例genObj获取一个值,即:执行alert('a'); //如果再一次.next()就执行alert('b'); 但是,我们不能无限制地调用next从Generator...原因:Generator犹如一种序列,一旦序列值被消费,你就不能再次消费。即,序列为空后,再次调用就会返回undefined!。 那么,要怎么能够才能再次消费呢?...相反,创建了一个迭代器,通过该迭代器我们才能从生成器请求值。在生成器生成了一个之后,生成器会进入挂起执行并等待下一个请求到来状态。从某种方面上说,生成器工作更像一个状态机。...:帮助处理异步代码 回调函数Promise对象上注册成功和失败回调函数 箭头函数:适合用在回调函数上 闭包:迭代器async函数内被创建,promise回调函数内通过闭包获取该迭代器 generator

24420

普通函数箭头函数区别以及箭头函数注意事项、不适用场景

箭头函数this指向定义时候继承自外层第一个普通函数this。 下面栗子一个函数定义箭头函数,然后一个函数执行箭头函数。...它们(call、aaply、bind)会默认忽略第一个参数,但是可以正常传参。 然后又通过隐式绑定来尝试同样也失败了,new 调用会报错,这个稍后再说。...箭头函数外层没有普通函数,严格模式和非严格模式下this都会指向window(全局对象) 唔,这个问题实际上是面试官提出来,当时认为箭头函数规则就是:箭头函数this指向继承自外层第一个普通函数...既然箭头函数this指向定义时候继承自外层第一个普通函数this,那么: 当箭头函数外层没有普通函数this会指向哪里?...第二种情况是:箭头函数this如果指向普通函数,argumens继承于该普通函数

1.6K00

社招前端二面react面试题集锦

因此在这些阶段发岀Ajax请求显然不是最好选择。组件尚未挂载之前,Ajax请求将无法执行完毕,如果此时发出请求,将意味着组件挂载之前更新状态(如执行 setState),这通常是不起作用。...(1)当使用箭头函数作为map等方法回调函数时,箭头函数作用域是当前组件实例化对象(即箭头函数作用域是定义时作用域),无须绑定作用域。(2)事件回调函数要绑定组件作用域。...但是这种写法很少使用,并不是常用写法。React允许对 setState方法传递一个函数接收到先前状态和属性数据并返回一个需要修改状态对象,正如我们在上面所做那样。... React组件是一个函数一个类,它可以接受输入并返回一个元素。注意:工作,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...在编译时候,转化成一个 React. createElement调用方法。说说你用react有什么坑点?1. JSX做表达式判断时候,需要强转为boolean类型如果不使用 !!

2K60

普通函数箭头函数区别

下面栗子一个函数定义箭头函数,然后一个函数执行箭头函数。...它们(call、aaply、bind)会默认忽略第一个参数,但是可以正常传参。 然后又通过隐式绑定来尝试同样也失败了,new调用会报错,这个稍后再说。...(全局对象) 唔,这个问题实际上是面试官提出来,当时认为箭头函数规则就是:箭头函数this指向继承自外层第一个普通函数this,现在看来真是不严谨(少说一个定义时候),要是面试官问我:定义和执行不在同一个普通函数...,它又指向哪里,肯定歇菜… 既然箭头函数this指向定义时候继承自外层第一个普通函数this,那么: 当箭头函数外层没有普通函数this会指向哪里?...第二种情况是:箭头函数this如果指向普通函数,argumens继承于该普通函数

84230

JS 面试题 大全

14、ajax是什么?以及如何去创建? 15、什么是跨域?jsonp原理?以及怎么实现? 16、防抖和节流 17、同步和异步区别,分别列举一个同步和异步例子?...23、请指出document.onload和document.ready两个事件区别? 24、请解释JSONP工作原理,以及它为什么不是真正AJAX?...25、通过new创建一个对象时候,构造函数内部有哪些改变? 26、如何防范CSRF攻击,XSS攻击? 27、箭头函数普通函数区别? 28、说一下js继承?...ES6有class继承: ①.class就相当于Es5构造函数 ②.class定义方法签后不能加function ,全部定义classprototype属性 ③.class只能定义方法...) (3)时机到了,就移动到callback queue(回调队列) (4)如果 call stack 为空(即同步代码执行完毕) event loop 开始工作 (5)轮询查找 callback

1.6K30

「后端小伙伴来学前端了」Vue脚手架 render 函数

(虽然有那么多vue…js,但是咋知道是这个呢?测出来,亲测) 报错提示,告诉我们说,如果引入完整版vue也能解决问题,那么我们就引用完整路径,来测试一下,看可以吗?...(你可以当做个工具人,用就要,不用就扔掉哈哈) ---- 但是如果我们一定残缺版vue呢?这个render函数在这里是做什么呢?...返回值也是函数createElement() 首先说明一下demo项目的结构,然后你再思考思考 是有一个App组件和四个组件小组件,并且App中进行了引入,而这上面也正好有四个参数, 而createElement...所以换而言之,如果我们写成普通函数,就是如下状态 render (h) { console.log(h) return h(App) } 因为我们组件全部都在 App 内,所以我们实际只需要渲染...虽然有手就能用,但是就因为简单,想我们对于理解,很长很长一段时间内都会处于表面上吧. 后语 大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。

30520

(自制翻译)如何解决vuethis报错undefined

猜你肯定用了一个箭头函数如果这个箭头函数替换成普通函数,也许能解决上面你遇到问题。 接下来让我们深入原理来了解为什么会产生这个问题。...由于我们是vue组件里定义那么this归属于vue组件。接下来将解释this作用域。...箭头函数 箭头函数书写起来更简略更快捷,并能为我们获得更多人气。但是变得不那么好了当我们一个对象里定义方法时,比如当我们编写vue组件时。...我们将深究其中原理,但首先我们要明白箭头函数,this是去函数定义时环境查询。...当我们普通函数里使用箭头函数时,普通函数会设置this作为我们vue组件,这样箭头函数就能正常使用this了 看下面这个例子: data() { return { match: 'This

4.1K40

再说this

似乎没有也可以做好所有的工作。 而且是对某种意义上 。也许你可以只专注于一种结构并且完全忽略另一种,但这样你只能是一个 JavaScript 开发者。...而在 this 规则具有实用性是这一条: 如果在对象方法中使用 this,而该方法该对象上下文中调用,那么 this 指代该对象本身。 你会说“该对象上下文中调用”……是啥意思?...附注:不要在全局作用域普通函数或另一个函数作用域中使用 this!this 是个面向对象东西,只在对象上下文(或类上下文)中有意义。...如果事件处理程序写成 bobRossObj.onFriendClick,实际上是 bobRossObj.onFriendClick 上保存函数拿出来,然后作为参数传递。...而且你还知道箭头函数普通函数有点区别,尽管不太清楚具体区别是什么。 简而言之,两者区别在于: 定义箭头函数时,不管 this 指向谁,箭头函数内部 this 永远指向同一个东西。

57620

React学习(九)-React中发送Ajax请求以及Mock数据

,那么应该在哪个生命周期函数中发起请求?...当然对于UI以什么样方式来显示,你自己可以用css进行控制,这并不是文本重点 在哪个生命周期函数中发送AJax请求 Ajax请求放在componentWillMount组件即将被挂载函数也是可以...jquery是一个库,React你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐 npm install -S jquery 或者 cnpm install -S jquery 然后在你需要请求数据文件处...)方式 将json字符串,转化为json对象,然后做处理 如果你是使用axios方式请求数据,那么是不用进行json序列格式化 小结 React请求数据几种方式 axios(普遍常用)...,如上示例代码所示,但是若是request方式,url写成反斜线/方式是不生效 使用request方式,需要带上http协议,它也支持线上接口 若是遇到跨域问题,在请求头headers,添加Access-Control-Allow-Origin

4.7K31

React基础(9)-React中发送Ajax请求以及Mock数据

,那么应该在哪个生命周期函数中发起请求? ...,不生效 对应UI效果显示:如下所示 image.png 当然对于UI以什么样方式来显示,你自己可以用css进行控制,这并不是文本重点 在哪个生命周期函数中发送AJax请求 Ajax...请求放在componentWillMount组件即将被挂载函数也是可以 但是官方推荐放在componentDidMount这个生命周期函数中发起Ajax请求,因为执行这个生命周期时,DOM已经挂载完了...)方式 将json字符串,转化为json对象,然后做处理 如果你是使用axios方式请求数据,那么是不用进行json序列格式化 小结 React请求数据几种方式 axios(普遍常用)...,不过个人推荐使用easy-mock,但是其他方式也不赖,要是不是线上,断网了 那么其他方法就比较适用了,之所以介绍了不同工具,主要是开拓自己思路 这个工具用得不爽,就用另外一个,总有一个适合自己

2.1K30

前端之Vue.js库使用

,从而做相应操作,侦听属性是一个对象,键是要监听对象或者变量,值一般是函数,当你侦听元素发生变化时,需要执行函数,这个函数有两个形参,第一个是当前值,第二个是变化后值。...,const定义变量是常量 alert(iNum01) alert(iNum02); alert(iNum03);  箭头函数 可以箭头函数理解成匿名函数第二种写法,箭头函数作用是可以在对象绑定...new Vue({ el: '#example' })   data 必须是函数 组件就是vue实例,所有vue实例属性和方法,组件也可以用,但是data属性必须是一个函数,因为组件会重复使用在多个地方...先导入路由包,然后组件对象还需要包含。...跨域请求 vue自动化工具提供了开发服务器,我们在这个服务器环境下开发,改动代码可以马上更新显示,错误了还有代码提示,非常方便,但是如果我们组件需要数据,而且数据一个服务器环境下运行,我们就需要跨域请求数据

5.2K30

发现了华点:vue规定用普通函数定义方法,为什么react又要箭头函数

大家好,是年年! 如果使用过react和vue,应该发现过一个问题:vue告诉我们不应该方法、生命周期用箭头函数去定义;而在react类组件方法写成箭头函数形式却更方便。...但有趣是,为了达到同样目的,一个是不能使用箭头函数一个是使用箭头函数便能解决 react vue Reactthis丢失 首先来看看react,这是一个普通类组件写法: class Demo...:一个箭头函数实现,另一个普通函数。...调用时分别打印this,结果如下: 箭头函数this正确指向了组件实例,但普通函数却指向了undefined,为什么?...定义只有箭头函数才能根据作用域链找到组件实例;在对象,只有拥有自身this普通函数才能被修改this指向,被vue处理后绑定到组件实例。

77110

C#开发BIMFACE系列51 Web网页中使用Vue.js加载模型与图纸

Vue.js 是我们中国人创造发明,作者叫尤雨溪。 尤雨溪谷歌工作工作过程受到Angular启发,从中提取自己所喜欢部分,开发出了一款轻量框架。...Vue.js并没有直接提供Ajax相关方法。...Axios 是一个基于 promise HTTP 库,可以用在浏览器和 node.js 。...then() 回调函数 回调函数写成箭头函数(上述代码第18行),则回调函数指针指向 Vue 组件本身,可以通过 this 关键字调用 Vue 组件其内部定义属性、方法等。...回调函数写成匿名函数(上述代码第10行),则回调函数指针指向函数操作本身,此时如果用this去调用Vue组件定义属性、方法会报错。 所以此处写成箭头函数形式,然后调用其他方法。

1.3K20
领券