Vue.js_36_ 箭头函数的使用和 this 指向

最新推荐文章于 2024-06-10 23:37:57 发布
最新推荐文章于 2024-06-10 23:37:57 发布
阅读量969 收藏 1
点赞数 1
分类专栏： Vue.js（更新完） 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260974/article/details/105643644
版权

本系列博客汇总在这里：Vue.js 汇总

箭头函数的使用和 this 指向

源码工程文件为：

一、箭头函数

箭头函数: 也是一种定义函数的方式。
在这里插入图片描述
在这里插入图片描述

二、this 指向

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<script>
			// 什么时候使用箭头
			// setTimeout(function () {
			//   console.log(this);
			// }, 1000)
			//
			// setTimeout(() => {
			//   console.log(this);
			// }, 1000)

			// 问题: 箭头函数中的this是如何查找的?
			// 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
			// const obj = {
			//   aaa() {
			//     setTimeout(function () {
			//       console.log(this); // window
			//     })
			//
			//     setTimeout(() => {
			//       console.log(this); // obj对象
			//     })
			//   }
			// }
			//
			// obj.aaa()


			const obj = {
				aaa() {
					setTimeout(function() {
						setTimeout(function() {
							console.log(this); // window
						})

						setTimeout(() => {
							console.log(this); // window
						})
					})

					setTimeout(() => {
						setTimeout(function() {
							console.log(this); // window
						})

						setTimeout(() => {
							console.log(this); // obj
						})
					})
				}
			}
			obj.aaa()
		</script>
	</body>
</html>

在这里插入图片描述
如有错误，欢迎指正！

魏宇轩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue踩坑之一】箭头函数的this指向
FrequencyStar的博客
07-29 1336
【一】methods箭头函数的this指向 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象 <body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </
箭头函数的this
白瑕 的博客
05-29 1610
文章目录一、熟悉箭头函数1.传一个参数2.传多个参数二、this指向问题总结 一、熟悉箭头函数 箭头函数是ES6新增的语法,当准备把函数作为参数传递时,用箭头函数看起来会比较简洁,简洁,但是可读性略差(尤其是它被省略的根本不像个函数的时候). 1.传一个参数 const 函数名 = 参数 => { xxx函数体 xxx函数体 } 或 const 函数名 = (参数) => { xxx函数体 xxx函数体 } 2.传多个参数 const 函数名
ES6 箭头函数中的 this？你可能想多了（翻译）
dcof99817的博客
10-22 173
箭头函数=>无疑是ES6中最受关注的一个新特性了，通过它可以简写 function 函数表达式，你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”。 箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了，虽然它早已不稀奇，却给我们一种刚刚发现的新鲜感。 粉我的人都知道俺因为某些原因不怎么喜欢 => 的语法，不过别担心，本...
箭头函数 this
最新发布
AgonyQAQ的博客
06-10 368
箭头函数中，是没有this的，所以写在箭头函数中的this，会自动向当前作用域的上一层作用域寻找，是否含有this，如果有就指代，没有就继续找上一层。所以setTimeout函数中的this指代的就是Vue实例对象vm。setTimeout箭头函数中没有this可以指代的对象。上一层作用域是Vue实例对象vm的监视属性watch。所以watch中的this指代的是Vue实例对象vm。JS的window对象调用setTimeout函数。setTimeout函数，是箭头函数。
VUE - 箭头函数this
TrustNature
12-16 566
对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。 但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。 在Vue的官方文档是这么解释的： methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使...
vue箭头函数this作用域
wushen的博客
04-30 2302
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ console.log(this) //undefined ...
解析vue data不可以使用箭头函数问题
08-27
在 Vue 中，data 属性不能使用箭头函数，这是因为箭头函数的 this 指向问题。在 JavaScript 中，非严格模式下，函数都会有一个 this 指向，但是箭头函数的 this 指向的是定义时的上下文环境，而不是调用时的上下文...
解决vue.js this.$router.push无效的问题
12-09
或者，你可以使用箭头函数来保持正确的上下文，因为箭头函数不会创建自己的`this`值，而是继承自父作用域。 ```javascript login() { const self = this; if (this.email.length > 0 && this.password.length > 0...
在vue中使用回调函数,this调用无效的解决
10-14
在Vue.js应用中，开发者经常会遇到`this`指向问题，特别是在使用回调函数时。这个问题通常发生在异步操作中，如网络请求，因为这些操作会在不同的上下文中执行，导致`this`不再指向Vue实例。以下是对这个问题的深入...
vue使用axios时关于this的指向问题详解
08-28
通过使用箭头函数、`bind(this)`或保存`this`到一个变量，我们可以确保在异步回调中正确地访问Vue实例的方法和属性。这有助于编写出更清晰、可维护的代码，提高开发效率。在日常工作中，不断学习和掌握JavaScript的...
箭头函数中的this
CZBBhkrx的博客
01-28 535
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿 它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this 一针见血式总结: 普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式
箭头函数this
ahua2800的博客
12-17 54
箭头函数没有独立执行上下文（ this ），所以其内部引用 this 对象会直接访问父级。 转载于:https://www.cnblogs.com/shiyunfront/p/10133116.html
九、ES6的箭头函数
zep
01-30 150
一、箭头函数的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 箭头函数：也是一种定义函数的方式 // 1.定义函数的方式：function const aaa =function
箭头函数
lmyh1111的博客
09-26 84
基本用法： 在es6中，允许使用“箭头”（=>）定义函数。 var s=name=>name; //等同于 var s=function (name){ return name; }; 1、若函数没有参数可以省略小括号，函数体一句代码 let fn=()=>'hello'; console.log(fn()); let fn2=age...
vue 箭头函数
weixin_35753431的博客
01-03 576
Vue.js 中的箭头函数是 JavaScript 中的语法糖，用于简化函数的书写方式。 它的一个主要优点是可以自动绑定 this。在 Vue 中使用箭头函数，this 始终指向组件的实例。 例如： <template> <div> <button @click="incrementCount">+</button> </div...
箭头函数详讲（箭头函数中的this）
热门推荐
qq_52395816的博客
05-16 1万+
箭头函数详讲（箭头函数中的this） 箭头函数的基本使用： 在这里插入图片描述 知识点： 箭头函数是不能提升的，所以需要在使用之前定义。 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。 如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯 箭头函数this的几种解释说法 1.当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。 2.箭头函数中的this引
箭头函数this总结
Vampirecally的博客
09-12 194
class RouterClass { constructor() { this.routes={} this.currentUrl='' this.historyStack=[] window.addEventListener('load',()=>this.render()) //这里换成 window.addEventListener('load',this.render)则不会奏效 wind.
vue 外部函数与methods中函数区别_JavaScript 中普通函数与箭头函数的区别
06-01
在Vue中，外部函数与methods中函数的区别在于作用域。外部函数的作用域是全局作用域，而methods中的...因此，箭头函数通常用于解决this指向问题，而普通函数则可以根据具体情况使用不同的调用方式来改变this的指向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值