箭头函数心得
Posted 余烬的小舟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了箭头函数心得相关的知识,希望对你有一定的参考价值。
箭头函数
箭头函数是匿名函数,语法比函数表达式更简洁,并且没有自己的this
,arguments
,super
或new.target
。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
引入箭头函数有两个方面的作用:更简短的函数并且不绑定this
。
特性
- 没有自己的
this
- 没有自己的
argument
- 没有
prototype
属性 - 没有
super
或new.target
yield
关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。- 不能当作构造函数,不能进行
new
操作
语法
一般语法
(param1, param2, …, paramN) => { statements }
当只有一个参数时,圆括号是可选的,下面两种都对。
param1 => { statements }
(param1) => { statements }
如果没有参数时,需要保留圆括号。
// 没有参数的函数应该写成一对圆括号。
() => { statements }
另外还有一些简写写法
(param1, param2, …, paramN) => expression
//相当于:
(param1, param2, …, paramN) =>{ return expression; }
建议无论是否只有一个参数,都保留圆括号(方便以后添加参数或删减参数)
高级语法:
//加括号的函数体返回对象字面量表达式:
params => ({foo: bar})
//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
箭头函数的this
<u>而箭头函数不会创建自己的this,它的this是在定义函数的时候绑定的,它只会在自己的作用域链向外逐层地查找,找到最近的普通函数的this对象(类似查找变量),然后继承这个this
</u>
被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变.并且在箭头函数this对象的指向是不能直接改变的。
function fn1(){ // 第一层普通函数
console.log(this); // window
let obj1 = { // 第二层对象
fn2: () => { // 第三层箭头函数
console.log(this); // window
}
}
obj1.fn2();
}
fn1()
fn1是普通函数,它的this
指向全局对象window
,而fn2是一个箭头函数,它被嵌套在fn1的obj1对象内,它继承了fn1的this
,因此箭头函数的this
也指向window
。
当箭头函数的作用域链都没有能继承的this时,它的指向是全局对象。
如下
let arrow = () => {
console.log(this);
}
arrow() // window对象
let o1 = {
o2: {
arrow: () => {
console.log(this);
}
}
}
o1.o2.arrow() // window对象
上面代码中箭头函数都无法在祖先作用域中找到能继承的this
,因此无论是否在严格模式下都会指向window
,下面把o2改成一个普通函数(拥有自己的this
),此时箭头函数能找到继承的this
,于是指向。
let o1 = { o2(){ console.log(this); // o2对象 let arrow = () => { console.log(this); } arrow() }} o1.o2() // o2对象
箭头函数的arguments
箭头函数没有自己的arguments
,直接使用会报错
let fn1 = (a) => { console.log(arguments);}fn1("a")// Uncaught ReferenceError: arguments is not defined
但是和this
一样,它能继承普通函数的arguments
function fn1(a,b){ console.log(arguments); // Arguments(2){...} let arrow = () => { console.log(arguments); // Arguments(2){...} } arrow()}fn1("a","b")
在大多数情况下,使用剩余参数是相较使用arguments
对象的更好选择。
使用 new 操作符
箭头函数不能用作构造器,和 new
一起用会抛出错误。
var Foo = () => {};var foo = new Foo(); // TypeError: Foo is not a constructor
使用prototype属性
箭头函数没有prototype
属性。
var Foo = () => {};console.log(Foo.prototype); // undefined
使用 yield关键字
yield
关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。
修复缺陷
由于javascript的设计缺陷,在非严格模式下,在函数内部定义的函数 this
指向window
,严格模式下,this为undefined
。
let oTest = { fn(){ let fnTest = function(){ console.log(this); } fnTest(); }}oTest.fn(); // window对象
而箭头函数则完全修复了这个缺陷。只需要把上述代码修改成箭头函数即可。
let oTest = { fn(){ let fnTest = function(){ console.log(this); } fnTest(); }}oTest.fn();
以上是关于箭头函数心得的主要内容,如果未能解决你的问题,请参考以下文章