箭头函数在AJAX onload中不起作用。但是如果我把它写成一个普通的函数，那么它就能工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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，因为你不知道局部方法中这个

7270 0

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

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

1.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

装饰者模式

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

7111 0

Bookmarklet编写指南

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

1.8K9 0

前端学习笔记—JavaScript和jQuery

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

8201 0

JavaScript 中 this 的使用技巧总结

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

1.2K3 0

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

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

1.8K7 0

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

7912 0

JavaScript 异步编程

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。...所以，当一个事件没有结束时，界面将无法处理其他请求。现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。...但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。...回调函数回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。.../ajax_info.txt", true); xhr.send(); XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。

1331 0

【ECMAScript6】es6 要点（二）Promise | 自个写一个Promise | Generator | AsyncAwait

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

6212 0

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

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

2.6K6 0

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

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

1.9K0 0

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

5.2K3 1

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.9K3 0

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

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

4572 0

前端之Vue.js库的使用

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

5.8K3 0

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

2K3 0

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

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

1.3K3 0

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

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

4.4K4 0

再说this

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

7772 0

点击加载更多

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

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

装饰者模式

Bookmarklet编写指南

前端学习笔记—JavaScript和jQuery

JavaScript 中 this 的使用技巧总结

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

ES6 中 Promise 详解

JavaScript 异步编程

【ECMAScript6】es6 要点（二）Promise | 自个写一个Promise | Generator | AsyncAwait

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

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

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

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

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

前端之Vue.js库的使用

JS 面试题大全

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

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

再说this

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐