一、箭头函数的介绍
1.1 什么是箭头函数
ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义。
1.2 基本语法
// 箭头函数
let fn = (name) => {
// 函数体
return `Hello ${name} !`;
};
// 等同于
let fn = function (name) {
// 函数体
return `Hello ${name} !`;
};
箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function。
函数的参数放在=>前面的括号中,函数体跟在=>后的花括号中
1.3 箭头函数的参数
①如果箭头函数没有参数,写空括号
//没有参数,写空括号
let fn = () => {
console.log('hello');
};
②如果箭头函数有一个参数,也可以省去包裹参数的括号
//只有一个参数,可以省去参数括号
let fn = name => {
console.log(`hello ${name}!`)
};
③如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中。
let fn = (val1, val2, val3, val4) => {
return [val1, val2, val3, val4];
}
1.4 箭头函数的函数体
①如果箭头函数的函数体只有一句执行代码,简单返回某个变量或者返回一个简单的js表达式,可以省去函数体花括号{ }
//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };
//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};
②如果箭头函数的函数体只有一句代码,返回的不是变量和简单的js表达式,而是一个对象。
//错误写法—花括号会被解释为函数体
let getItem = id => {
id: id,
name: 'gaby'
};
//正确写法
let getItem = id => ({
id: id,
name: 'gaby'
});
③如果箭头函数的函数体只有一条语句且不需要返回值(最常用于回调函数),加上void关键字
let fn = () => void doesNotReturn();
1
箭头函数用于回调函数,常见简洁
//栗子1
//普通函数
[1, 2, 3].map(function (x) {
return x + x;
});
//ES6箭头函数
[1, 2, 3].map(x => x + x);
//栗子2
//普通函数
var result = [2, 4, 5, 1, 6].sort(function (a, b) {
return a - b;
});
//ES6箭头函数
var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);
二、箭头函数的this指向规则
2.1 箭头函数没有原型prototype,因此箭头函数没有this指向
let fn = () => {
console.log('Hello World !')
};
console.log(fn.prototype); // undefined
2.2 箭头函数不会创建自己的this,如果存在外层第一个普通函数,在定义的时候会继承它的this
箭头函数没有自己的this指向,它会捕获自己定义所处的外层执行环境,并且继承这个this值。箭头函数的this指向在被定义的时候就确定了,之后永远都不会改变。(!永远)
var id = 'Global';
//普通函数
function fn1() {
setTimeout(function () {
console.log(this.id)
}, 1000);
}
//箭头函数
function fn2() {
setTimeout(() => {
console.log(this.id)
}, 1000);
}
fn1.call({
id: 'obj'
});//Global
fn2.call({
id: 'obj'
});//obj
解析:普通函数的setTimeout 一秒后执行是在全局作用域,所有this指向window对象,this.id指向了全局变量id,输出Golbal。箭头函数的this在定义的时候就确定了,继承fn2的执行环境中的this,fn2的this指向被call方法改变绑定到obj这个对象
var id = 'Global';
var obj = {
id: 'OBJ',
a: function () {
console.log(this.id)
},//方法a普通函数定义
b: () => {
console.log(this.id)
}//方法b用箭头函数定义
};
obj.a();//OBJ
obj.b();//Global
解析:普通函数作为对象的方法调用,this指向所属的对象(谁调用它就指向谁),this.id 就是obj.id;箭头函数继承定义它的执行环境的this,指向window对象,指向全局变量,输出Global。花括号{}无法形成一个单独的执行环境,所有它依然在全局中。
2.3 箭头函数的this是继承而来的永远不会变,call/apply/bind也无法改变
.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向,但由于箭头函数的this定义时就已经确定且永远不会改变
var name = 'gaby'
var person = {
name: 'gabrielle',
say: function () {
console.log('say hello', this.name)
}, //普通函数
say2: () => {
console.log('say2 hello', this.name)
} //箭头函数
}
person.say.call({
name: 'Mike'
})
person.say2.call({
name: 'Amy'
})
解析:say的普通函数通过call调用已经改变this指向。say2箭头函数调用call绑定尝试改变this指向,但是仍然打印出外一层普通函数的this指向,window对象的全局变量name。
六、箭头函数与普通函数简单区别总结
(1)箭头函数语法更简洁清晰,快捷。
(2)箭头函数没有原型prototype,并不会自己创建this,并且this不能被修改,call等都不能修改到。只能间接修改被继承的this
(3)箭头函数的this在定义时就定了,继承外一层的普通函数
(4)如果箭头函数外一层再外一层都不能找到普通函数,在严格和非严格情况下都会指向window对象
(5)箭头函数的this指向全局,使用arguments会报未声明的错误
(6)箭头函数的this指向外一层的普通函数,使用argument继承该普通函数
(7)箭头函数不能构造函数,不能new.target,不能new,没有constructor
(8)箭头函数不支持重复命名参数,普通函数可以重复命名参数
————————————————
版权声明:本文为CSDN博主「傲娇味的草莓」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45709829/article/details/123931582