普通函数:function( ) { }
箭头函数:( ) => { }
我们知道圆括号一般是用来放参数的,花括号一般用来放函数的主体,箭头函数也是类似的用法。
简单对比一下两个函数:
箭头函数:
let xx = () => '我是xx1';
console.log( xx() ); //我是xx1
普通函数:
function xx2(){
return '我是xx2';
}
console.log( xx2() ); //我是xx2
es6箭头函数的定义是,允许使用"箭头"( => )来定义函数。
箭头函数中,this指向的是它的父级函数的作用域。
普通函数中的this,指向调用它的那个对象,或者如果是构造函数的话,指向创建的对象实例。
let obj = {
name:'小明',
age:'18',
sayName(){
setTimeout(()=>{
console.log(this);
// {name: '小明', age: '18', sayName。。。 }
},500)
setTimeout(function(){
console.log(this);
// Window {window:。。。}
},500)
}
}
obj.sayName()
来看箭头函数不能作为构造函数使用的情况,也不能通过new关键字调用:
let fn = () => '你看会不会报错';
new fn(); //Uncaught TypeError: fn is not a constructor
报错说明它没有构造函数,this指向的不是自己,是当前所在对象的父级window。
let fn = () => {
console.log(this);
}
fn();
来看它的构造器是什么:
let fn = () => {
console.log(this.constructor);
}
fn(); // ƒ Window() { [native code] }
指向的是window的构造函数,与我们要new的函数没有关系,所以上面会报错:fn is not a constructor
箭头函数也没有prototype属性:
let fn = () => {
console.log(this.prototype);
}
fn(); //undefined
箭头函数就是一种简化的语法,相当于return语句,它是匿名函数的新写法,不需要function关键字,参数和函数体之间用( => )连接。