首页
学习
活动
专区
工具
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函数 - 腾讯云

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

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

相关·内容

vue2知识点:箭头函数和普通函数的this指向问题

主要区别普通函数:(谁调用我,我的this就指向谁)箭头函数:(箭头函数没有自己的this, 它的this是继承而来, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值;或者说默认指向在定义它时所处的对象...详细说明注意点1:不被vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用)那么请使用箭头函数,因为箭头函数中this指代vm或者vc。...注意点2:所有被Vue管理的函数(Vue帮忙调用),最好写成普通函数(普通函数中的this代表它的直接调用者,如obj.fn(),fn的this指向就是obj。...,我的回答是:不被vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用)那么请使用箭头函数。...举例说明就是,你要使用\$on去触发自定义事件,你先定义一个变量存储当前组件的vm和vc,然后你在\$on的配置项的函数中直接用定义好的那个this变量去设置值,不要在配置项中的函数中用this,因为你不知道局部方法中这个

20400

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

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

82910
  • 装饰者模式

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

    55310

    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属性是一个非标准的、在某些环境中可用的方式来访问这个链接。...在浏览器中,DOM的HTML分析器将一个页面转换成一个对象模型的集合,通常称为DOM树。浏览器通过对这个DOM对象模型操作来线上HTML页面。

    18410

    JavaScript 中 this 的使用技巧总结

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

    87430

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

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

    1.6K70

    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 方法,执行正常的流程。

    60020

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

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

    27320

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

    箭头函数的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

    前端之Vue.js库的使用

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

    5.2K30

    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.2K30

    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 ,全部定义在class的prototype属性中 ③.class只能定义方法...) (3)时机到了,就移动到callback queue(回调队列)中 (4)如果 call stack 为空(即同步代码执行完毕) event loop 开始工作 (5)轮询查找 callback

    1.6K30

    普通函数和箭头函数的区别

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

    86130

    (自制翻译)如何解决在vue中this报错undefined

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

    4.1K40

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

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

    32020

    再说this

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

    58820

    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.4K20
    领券