java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂

基本用法

在ES6中允许使用 => 来定义函数，如下：

var f = a => a;

console.log(f(1)); //1

就等同于

var f = function(a){

return a;

}

console.log(f(1)); //1

从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，()可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则{}可以省略不写

1.无参数情况

若箭头函数不需要参数，则左侧用()代替，如下：

var f = () => {

console.log("无参数情况");

}

f();//无参数情况

2.有参数情况

var f = (a, b) => {

return a+b;

}

console.log(f(1,2)); //3

var f = a => a;

console.log(f(1)); //1

如果箭头函数有参数，则需要用()括起来，若只有一个参数，括号可以省略不写

在这里要注意一个情况，就是当箭头函数直接返回一个对象的时候，如下：

var f = () => {name:'liming', age:22}; //报错

console.log(f());

这样写肯定是报错的，因为{}执行时变成代码块，会去运行代码，所以要用一个()括起来才可以，如下:

var f = () => ({name:'liming', age:22});

console.log(f());

执行结果为：

{name: "liming", age: 22}

以上这个写法才是正确的

箭头函数注意点

1.this指向

var a = '全局变量a';

var obj={

a:'局部变量a',

fn1:function(){

console.log(this.a);

},

fn2:()=>{

console.log(this.a);

}

}

obj.fn1();

obj.fn2();

输出结果为：

局部变量a

全局变量a

普通函数的this我们知道是指向最近的一个对象，而箭头函数的this实际上是指向定义时的this，比如把上面代码改为：

var obj={

a:'局部变量a',

fn1:function(){

console.log(this.a);

},

fn2:()=>{

console.log(this.a);

}

}

obj.fn1();

obj.fn2();

输出结果为：

局部变量a

undefined

此时因为箭头函数是指向全局的，全局没有变量a则输出undefined,这里的fn1和fn2都是全局函数，所以箭头函数this指向的是定义时的全局，而普通函数的this指向的是最近的一个对象

上面如果那个例子不太明白，可以再看下如下例子：

this.a = '全局a';

function Timer() {

this.a = 'timer中的a';

// 普通函数

setTimeout(function () {

console.log('普通函数:', this.a);

});

// 箭头函数

setTimeout(() => {

console.log('箭头函数:',this.a);

});

}

new Timer();

输出结果为：

普通函数: 全局a

箭头函数: timer中的a

这里普通函数会指向全局是因为，距离普通函数最近的对象是setTimeOut,而setTimeOut是挂在全局作用域中，所以普通函数指向全局，箭头函数指向的是定义时的对象，箭头函数是在Timer中定义的，所以箭头函数指向Timer

如果把以上代码改为如下：

this.a = '全局a';

function Timer() {

this.a = 'timer中的a';

// 普通函数

setTimeout(function () {

console.log('普通函数:', this.a);

});

// 箭头函数

setTimeout(() => {

console.log('箭头函数:',this.a);

});

}

Timer();

输出结果：

普通函数: timer中的a

箭头函数: timer中的a

这个是为什么呢，因为如果是new Timer相当于是构造函数，构造了一个对象，如果是Timer()就相当于是调用函数Timer()这两者还是有区别的，如果是调用函数Timer()，这个时候this的指向都是全局，在局部修改this.a会覆盖全局的this.a

通过以上，我们可以知道普通函数跟箭头函数this指向的区别是：

普通函数： this指向最靠近的一个对象

箭头函数： this指向定义时的对象，也就是说箭头函数一旦定义完成，它的指向是固定的，没法改变，它的指向是定义时所在的作用域，而不是执行时的作用域

2.不可以当做构造函数

箭头函数不可以当做构造函数，也就是不可以new一个，否则会报错，如下：

var fn = ()=>{

console.log("123");

}

new fn(); //Uncaught TypeError: fn is not a constructor

以上会报错，因为箭头函数本身没有属于自己的this，所以箭头函数不可以当做构造函数，也因为箭头函数没有自己的this，所以call()、apply()、bind()这些方法去改变this的指向对箭头函数也是无效的，如下：

this.x = 'outer';

(function() {

console.log([

(() => this.x).bind({ x: 'inner' })()

]);

})();

输出结果为：

["outer"]

把箭头函数通过bind绑定可见无效，箭头函数还是指向全局

以上是个人总结，有什么不足之处欢迎留言探讨！