目录
定义和使用
首先要在脑子里划分
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中的内部类可以直接访问外部类的成员。