js箭头函数使用方法及特性

JS/TS

js箭头函数使用方法及特性

08-31 15:49

JS箭头函数有几种不同写法

写法一

var fun = (m,n) => {

return m+n;

}

console.log(fun(5,6))

写法二

var fun = () => {

return 'fun';

}

没有参数时，保留括号

写法三

var fun = data => {

return data;

}

console.log(fun('22'))

当只有一个参数时，可省去括号，上面的写法等同于

var fun = (data) => { return data; }

写法四

var fun = data => data;

console.log(fun('33'))

var fun = data => data==44?'yes':'no';

console.log(fun('44'))

当函数体只有一个表达式时，可省去括号和return，上面的写法等同于

var fun = data => {

return data;

}

var fun = data => {

return data==44?'yes':'no';

}

还有一种匿名函数的写法

var n=1;

var m=setInterval(()=>{

console.log(n);n++;

if(n==10)clearInterval(m);

},1000);

还有需要注意的是this指向的问题（注意：在对象内，箭头函数写法有变化）

js中this的指向有很多种情况，this指向谁，取决于函数如何调用，但箭头函数的this指向window，比如下面

var name = "最外层";

var obj = {

name: "对象内",

fun1: function(){

console.log(this.name)

fun2: () => {

console.log(this.name)

fun3: () => {

console.log(name);

fun4: () => {

console.log(this.obj.name);

}

fun5 = () => console.log(this.name);

fun6 = () => console.log(name);

fun7 = () => console.log(this.obj.name);

obj.fun1(); //对象内

obj.fun2(); //最外层

obj.fun3(); //最外层

obj.fun4(); //对象内

fun5(); //最外层

fun6(); //最外层

fun7(); //对象内

微信小程序

JS/TS