vue中箭头函数和普通函数的区分(同时和java做对比)

目录

定义和使用

首先要在脑子里划分

1.定义时

2.使用时

this的不同

script

箭头函数:定义时确定,不变

普通函数:使用时确定,改变

比如定时器,最后是windows调用的,写普通函数就会读取不到一些内部参数

例子:

javascript 复制代码
var name = '张三';
var person = {
        name:'李四',           
        age:18,
        fav:function(){
            console.log(this)
            console.log(this.name)
        }
    }
person.fav();
// this      为 person
// this.name为 "李四"
//person.fav(); 是person使用所以this为person
javascript 复制代码
var name = '张三';
var person = {
    name:'李四',
    age:18,
    fav: ()=>{
            console.log(this)
            console.log(this.name)
      }
    }
person.fav();
// this      为 Window
// this.name 为 "张三"
// person.fav(); 是person使用,但是箭头函数以定义为准,定义时fav在一个集合中,这个集合属于window所以this为window

看上面例子时请划分为使用和定义两个阶段

java

js中箭头函数和java中lambda表达式有些像

lambda表达式: 和箭头函数类似

普通函数: java中谁定义,就是谁的this,所以一般不会变化

VUE中箭头函数和普通函数的用处

箭头函数和普通函数一般在函数里面有函数,也就是函数返回值作为参数的时候/区别很大

函数(外函数)中有函数(内函数),内函数想访问外函数所在this的参数,使用普通函数是不行的

如下

javascript 复制代码
const vm = new Vue({
	el:"#root"
	data:{
		a:1
	},
	method:{
		Test01(){
		//这里的this为vm
			Test02(){
				//是Test01调用了Test02,所以这里访问不了this.a
			}
			//-------------分割线----------------
			()=>{
				//不用管谁调用了,定义的地方在vm,这里可以访问this.a
			}
		}
	}
})

上面这样写肯定不行,只是便于理解,如果下函数放到定时器里呢。

javascript 复制代码
const vm = new Vue({
	el:"#root"
	data:{
		a:1
	},
	method:{
		Test01(){
			setInterval(()=>{
				()=>{
					//这里可以访问this.a
					//如果你无需访问this.a就可以换为普通函数
				},
				16
			})
		}
	}
})

由于定时器是window调用,所以想要this指向vm,只能使用箭头函数,在定义时决定好this

和Java类部类的区别

JavaScript中的内部函数无法直接访问外部函数的局部变量,而Java中的内部类可以访问外部类的成员。

JavaScript中的内部函数通过闭包可以间接访问外部函数的局部变量,而Java中的内部类可以直接访问外部类的成员。

相关推荐
一棵树长得超出它自己1 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
web_Hsir3 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
松韬18 分钟前
Spring + Redisson:从 0 到 1 搭建高可用分布式缓存系统
java·redis·分布式·spring·缓存
绝顶少年30 分钟前
Spring Boot 注解:深度解析与应用场景
java·spring boot·后端
心灵宝贝30 分钟前
Tomcat 部署 Jenkins.war 详细教程(含常见问题解决)
java·tomcat·jenkins
天上掉下来个程小白32 分钟前
Redis-14.在Java中操作Redis-Spring Data Redis使用方式-操作列表类型的数据
java·redis·spring·springboot·苍穹外卖
ゞ 正在缓冲99%…40 分钟前
leetcode22.括号生成
java·算法·leetcode·回溯
写代码的小王吧44 分钟前
【Java可执行命令】(十)JAR文件签名工具 jarsigner:通过数字签名及验证保证代码信任与安全,深入解析 Java的 jarsigner命令~
java·开发语言·网络·安全·web安全·网络安全·jar
伊成1 小时前
Springboot整合Mybatis+Maven+Thymeleaf学生成绩管理系统
java·maven·mybatis·springboot·学生成绩管理系统
一人の梅雨1 小时前
化工网平台API接口开发实战:从接入到数据解析‌
java·开发语言·数据库