目录
箭头函数(Arrow Function)表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
一、基础语法
基础语法 (参数1,参数2,参数3……)=> {函数声明}
形参的情况
1.没有形参的情况下,小括号不能省略
let fun1 =() =>console.log("没有形参,小括号不能省略,省略了会报错")
fun1();
小括号省略了会报错
2. 只有一个形参的时候,()可以省略
let fun2 = a => console.log(a);
fun2('222');
3.两个及其以上个数的形参的时候,()不可以省略
let fun3= (x,y) => console.log(x,y);
fun3(23,56);
函数体的情况
1.函数只有一条语句或者是个表达式的时候,{ } 可以省略,会自动返回语句执行的结果或者表达式的结果
let fun4 = (x,y) => x+y;
console.log(fun4(23,45));
2.函数体不止一条语句或者表达式的情况下,{ }不可以省略
let fun5=(x,y) => {
console.log(x+y);
x*y
};
console.log(fun5(2,4)); //undefined
fun5(2,4);//6
3. 返回对象时,需要用()括起来,因为{ }已经去定义语句块了
//3. 返回对象时,需要用()括起来
let fun6 =(name, age,gender) =>{
return (person={
name,
age,
gender
})
};
console.log(fun6('Jack',29,'male'));
4. 直接作为事件手柄
document.addEventListener('click',ev => {
console.log(`我是事件:${ev}`) //我是事件:[object MouseEvent]
});
5.作为数组排序回调
let arr = [1,9,2,6,5,14,52,12].sort((a,b)=>{
if(a-b>0){
return 1
}else{
return -1
}
});
console.log(arr); //Array(8) [ 1, 2, 5, 6, 9, 12, 14, 52 ]
二、箭头函数中的this
箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this;
箭头函数不会自己创建this,它只会从自己作用域链的上一层继承this:
扩展理解: 箭头函数的this看外层的是否有函数,
如果有,外层函数的this就是内部箭头函数的this,
如果没有,则this是window。
/**测试箭头函数的this**/
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
btn1.onclick=function () {
console.log(this); //<button id="btn1">
};
btn2.onclick=() => {
console.log(this); //Window
};
let obj={
name:'箭头函数',
getName:() => {
btn3.onclick =() =>{
console.log(this);
}
}
};
obj.getName();//Window
这也就是说this的指向固定不变了。
function Person() {
this.age=0;
console.log(`我是第一个this:${this}`); //我是第一个this:[object Object]
setInterval( () =>{
this.age++;
console.log(this) //Object { age: 1 },这里的对象指向了person对象
},5000)
}
var p=new Person();
不适用箭头函数的情况下,内层函数和外层函数的this指向不一样
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0;
console.log(`我是第一个this:${this}`); //我是第一个this:[object Object]
setInterval(function growUp() {
// 在非严格模式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()构造函数中定义的 `this`并不相同.
this.age++;
console.log(this) //Window
}, 1000);
}
三、call apply 调用
由于 箭头函数没有自己的this指针,通过 call()
或 apply()
方法调用一个函数时,只能传递参数,不能绑定this,他们的第一个参数会被忽略。(这种现象对于bind方法同样成立)
/** call apply bind调用**/
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, a);
}
};
console.log(adder.add(1)); // 2
console.log(adder.addThruCall(3)); //4
四、不能使用argument
var func =(x,y) =>{
console.log(arguments)
};
func(1,3);
var arguments = [1, 2, 3];
var arr1 = () => arguments[2];
console.log(arr1()); // 3
function foo(n) {
var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
console.log(f()); //NaN
console.log(`arguments[0]是:${arguments[0]}`) //arguments[0]是:1
}
foo(1);
// 但是使用arguments[1],输出的就是NaN undefined
五、不能使用new
/**不能使用new**/
var Animal=(name,age) => {
this.name=name;
this.age=age
};
var dog=new Animal('Puppy',2);
console.log(dog)
扩展内容参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions