ES6:了解箭头函数
Posted QIANDXX
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6:了解箭头函数相关的知识,希望对你有一定的参考价值。
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的 this。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
基础语法:
通常函数的定义方法:
var fn1 = function(a, b) {
return a + b
}
function fn2(a, b) {
return a + b
}
使用ES6箭头函数语法定义函数,将原函数的 function
关键字和函数名都删掉,并使用 =>
连接参数列表和函数体。
var fn1 = (a, b) => {
return a + b
}
(a, b) => {
return a + b
}
当函数参数只有一个,括号可以省略;但是没有参数时,括号不可以省略。
// 无参
var fn1 = function() {}
var fn1 = () => {}
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}
箭头函数相当于匿名函数,并且简化了函数定义。
箭头函数有两种格式:
- 只包含一个表达式,省略掉了{ … }和return。
- 可以包含多条语句,这时候就不能省略{ … }和return
() => return 'hello'
(a, b) => a + b
(a) => {
a = a + 1
return a
}
如果返回一个对象,需要特别注意,如果是单表达式要返回自定义对象,不写括号会报错,因为和函数体的{ … }有语法冲突。
注意,用小括号包含大括号则是对象的定义,而非函数主体
x => {key: x} // 报错
x => ({key: x}) // 正确
箭头函数的基本特征
-
箭头函数this为父作用域的this,不是调用时的this
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。 -
箭头函数不能作为构造函数,不能使用new
-
箭头函数没有arguments,caller,callee
箭头函数本身没有arguments,如果箭头函数在一个 function 内部,它会将外部函数的 arguments 拿过来使用。 -
箭头函数通过 call 和 apply 调用,不会改变 this 指向,只会传入参数
let obj2 = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11
-
箭头函数不能作为 Generator 函数,不能使用 yield 关键字
-
箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}
- 多重箭头函数就是一个高阶函数,相当于内嵌函数
const add = x => y => y + x;
//相当于
function add(x){
return function(y){
return y + x;
};
}
注意事项
参数列表与返回值的语法
-
1个参数时,左边直接写参数名,0个或者多个参数时,参数列表要用()包裹起来
-
函数体只有1条语句时,右边值自动成为函数返回值,函数体不止1条语句时,函数体需要用 {} 包裹起来,并且需要手动 return
有歧义的字符
{
是唯一1个有歧义的字符,所以返回对象字面量时需要用()包裹,否则会被当作块语句解析
例:
var f1 = () => {};
f1(); // 返回undefined
// 等价于
// var f1 = function() {};
var f2 = () => ({});
f2(); // 返回空对象{}
// 等价于
// var f2 = function() {return {};};
关于this
箭头函数会从外围作用域继承 this,为了避免 that = this
,需要遵守:除了对象上的直接函数属性值用 function 语法外,其它函数都用箭头函数。
// 场景1
function MyType() {}
MyType.prototype.fn = function() {/*定义箭头函数*/}; // 箭头函数中this指向MyType类型实例
// 场景2
var obj = {};
obj.fn = function() {/*定义箭头函数*/}; // 箭头函数中this指向obj
function能定义一个新this,而箭头函数不能,它只能从外层借一个this。所以,需要新this出现的时候用function定义函数,想沿用外层的this时就用箭头函数
关于arguments对象
箭头函数没有arguments对象,因为标准鼓励使用默认参数、可变参数参数解构
// 一般函数
(function(a) {console.log(`a = ${a}, arguments[0] = ${arguments[0]}`)})(1);
// log print: a = 1, arguments[0] = 1
// 与上面等价的箭头函数
(a => console.log(`a = ${a}, arguments[0] = ${arguments[0]}`))(1);
// log print: Uncaught ReferenceError: arguments is not defined
以上是关于ES6:了解箭头函数的主要内容,如果未能解决你的问题,请参考以下文章