By

文章目录

解决问题：
在微信小程序的开发工具中，会发现里面已经有ES6语法转换ES5的设置，但是当你使用了箭头函数在里面使用this.setData会发现报错，这可能又是腾讯莫名的BUG了，建议换回ES5语法使用function(){}写法较为妥当。
在这里插入图片描述

1、单参数

1
2
3
4
5
6
function cheng(a=3){
　　return a*a;
}
 
let cheng = (a=3) => a*a;  // 箭头左边为参数  箭头右边为返回值
console.log(cheng(9));

2、多参数

1
2
3
4
5
6
function add(a,b){
　　return a+b;
}
 
let add = (a,b) => a+b;  // 默认返回值
console.log(add(3,9));

3、无返回值

1
2
3
4
5
6
function add(a,b){
　　console.log(a+b);
}
 
let add = (a,b) => {console.log(a+b)};   // 如果没有返回值，需要加{}
add(3,9);

4、多行

1
2
3
4
5
6
7
8
9
10
11
function add(a,b){
　　console.log(a+b);
　　return a+b;
}
 
let add = (a,b) => {
　　console.log(a+b);
　　return a+b;
}
 
console.log(add(3,9));

除了简洁以外，为啥需要改变原来的习惯去使用箭头函数？

它对this的处理与一般的普通函数不一样，箭头函数的this始终指向函数定义时的this,而非执行时

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
　　x:1,
　　func: function(){ console.log(this.x) },  // 此处的 this 代表 obj
　　test: function(){
　　　　setTimeout(function(){
　　　　　　alert(this);  // 因为使用了异步,在运行过程中，this发生了指针转移，不再指向obj,而是指向全局 Window对象
　　　　　　// [object Window]
　　　　　　this.func();
　　　　},1000);
　　}
};、
obj.test(); 

//报错
 // TypeError: this.func is not a function

箭头函数：

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
　　x: 1,
　　func: function(){ console.log(this.x) },
　　test: function(){
　　　　setTimeout(() => {
　　　　　　alert(this); // [object Object]  此处的this指向obj
　　　　　　this.func();
　　　　},1000);
　　}
};
 
obj.test();  // 这回this就指向obj了
文章目录