普通函数与箭头函数的区别
箭头函数
let fun = () => {
console.log('lalalala');
}
普通函数
function fun() {
console.log('lalla');
}
箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ … }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ … }和return。
箭头函数是匿名函数,不能作为构造函数,不能使用new
区别
箭头函数是匿名函数,不能作为构造函数,不能使用new
let FunConstructor = () => {
console.log('lll');
}
let fc = new FunConstructor();
箭头函数不绑定arguments,取而代之用rest参数…解决
function A(a){
console.log(arguments);
}
A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]
箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b();
obj.c();
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100 毫秒之后,timer.s1被更新了 3 次,而timer.s2一次都没更新。
箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM 事件的回调函数封装在一个对象里面。
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
上面代码的init方法中,使用了箭头函数,这导致这个箭头函数里面的this,总是指向handler对象。否则,回调函数运行时,this.doSomething这一行会报错,因为此时this指向document对象。
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
var obj = {
a: 10,
b: function(){
console.log(this.a); //10
},
c: function() {
return ()=>{
console.log(this.a); //10
}
}
}
obj.b();
obj.c()();
箭头函数通过 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
箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景
箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深…
普通函数和箭头函数的区别:
箭头函数的this指向规则:
1. 箭头函数没有prototype
(原型),所以箭头函数本身没有this
let a = () =>{};
console.log(a.prototype); // undefined
2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。
下面栗子中在一个函数中定义箭头函数,然后在另一个函数中执行箭头函数。
let a,
barObj = { msg: 'bar的this指向' };
fooObj = { msg: 'foo的this指向' };
bar.call(barObj); // 将bar的this指向barObj
foo.call(fooObj); // 将foo的this指向fooObj
function foo() {
a(); // 结果:{ msg: 'bar的this指向' }
}
function bar() {
a = () => {
console.log(this, 'this指向定义的时候外层第一个普通函数'); //
}; // 在bar中定义 this继承于bar函数的this指向
}
从上面栗子中可以得出两点
- 箭头函数的this指向定义时所在的外层第一个普通函数,跟使用位置没有关系。
- 被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变
3. 不能直接修改箭头函数的this指向
上个栗子中的foo函数修改一下,尝试直接修改箭头函数的this指向。
let fnObj = { msg: '尝试直接修改箭头函数的this指向' };
function foo() {
a.call(fnObj); // 结果:{ msg: 'bar的this指向' }
}
很明显,call显示绑定this指向失败了,包括aaply、bind都一样。
它们(call、aaply、bind)会默认忽略第一个参数,但是可以正常传参。
然后我又通过隐式绑定来尝试同样也失败了,new 调用会报错,这个稍后再说。
SO,箭头函数不能直接修改它的this指向。
幸运的是,我们可以通过间接的形式来修改箭头函数的指向:
去修改被继承的普通函数的this指向,然后箭头函数的this指向也会跟着改变,这在上一个栗子中有演示。
bar.call(barObj); // 将bar普通函数的this指向barObj 然后内部的箭头函数也会指向barObj
4. 箭头函数外层没有普通函数,严格模式和非严格模式下它的this都会指向window
(全局对象)
唔,这个问题实际上是面试官提出来的,当时我认为的箭头函数规则就是:箭头函数的this指向继承自外层第一个普通函数的this,现在看来真是不严谨(少说一个定义的时候),要是面试官问我:定义和执行不在同一个普通函数中,它又指向哪里,肯定歇菜…
既然箭头函数的this指向在定义的时候继承自外层第一个普通函数的this,那么:
当箭头函数外层没有普通函数,它的this会指向哪里?
这里跟我之前写的this绑定规则不太一样(不懂的可以点进去看一下),普通函数的默认绑定规则是:
在非严格模式下,默认绑定的this指向全局对象,严格模式下this指向undefined
如果箭头函数外层没有普通函数继承,它this指向的规则:
经过测试,箭头函数在全局作用域下,严格模式和非严格模式下它的this都会指向window
(全局对象)。
Tip:测试的时候发现严格模式在中途声明无效,必须在全局/函数的开头声明才会生效:
a = 1;
'use strict'; // 严格模式无效 必须在一开始就声明严格模式
b = 2; // 不报错
箭头函数的
箭头函数的arguments
箭头函数的this指向全局,使用arguments会报未声明的错误
如果箭头函数的this指向window
(全局对象)使用arguments
会报错,未声明arguments
。
let b = () => {
console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
PS:如果你声明了一个全局变量为arguments
,那就不会报错了,但是你为什么要这么做呢?
箭头函数的this指向普通函数时,它的argumens
继承于该普通函数
上面是第一种情况:箭头函数的this指向全局对象,会报arguments未声明的错误。
第二种情况是:箭头函数的this如果指向普通函数,它的argumens
继承于该普通函数。
function bar() {
console.log(arguments); // ['外层第二个普通函数的参数']
bb('外层第一个普通函数的参数');
function bb() {
console.log(arguments); // ["外层第一个普通函数的参数"]
let a = () => {
console.log(arguments, 'arguments继承this指向的那个普通函数'); // ["外层第一个普通函数的参数"]
};
a('箭头函数的参数'); // this指向bb
}
}
bar('外层第二个普通函数的参数');
那么应该如何来获取箭头函数不定数量的参数呢?答案是:ES6的rest参数(...
扩展符)
rest参数获取函数的多余参数
这是ES6的API,用于获取函数不定数量的参数数组,这个API是用来替代arguments
的,API用法如下:
let a = (first, ...abc) => {
console.log(first, abc); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
上面的栗子展示了,获取函数除第一个确定的参数,以及用一个变量接收其他剩余参数的示例。
也可以直接接收函数的所有参数,rest参数的用法相对于arguments
的优点:
-
箭头函数和普通函数都可以使用。
-
更加灵活,接收参数的数量完全自定义。
-
可读性更好
参数都是在函数括号中定义的,不会突然出现一个
arguments
,以前刚见到的时候,真的好奇怪了! -
rest是一个真正的数组,可以使用数组的API。
因为
arguments
是一个类数组的对象,有些人以为它是真正的数组,所以会出现以下场景:arguments.push(0); // arguments.push is not a function
如上,如果我们需要使用数组的API,需要使用扩展符/Array.from来将它转换成真正的数组:
arguments = [...arguments]; 或者 :arguments = Array.from(arguments);
rest参数有两点需要注意:
-
rest必须是函数的最后一位参数:
let a = (first, ...rest, three) => { console.log(first, rest,three); // 报错:Rest parameter must be last formal parameter }; a(1, 2, 3, 4);
-
函数的length属性,不包括 rest 参数
(function(...a) {}).length // 0 (function(a, ...b) {}).length // 1
扩展运算符还可以用于数组,这里是阮一峰老师的文档
PS:感觉这里写多了,但比较喜欢把一个知识点讲清楚…
使用new
调用箭头函数会报错
无论箭头函数的thsi指向哪里,使用new
调用箭头函数都会报错,因为箭头函数没有constructor
let a = () => {};
let b = new a(); // a is not a constructor
箭头函数不支持new.target
:
new.target
是ES6新引入的属性,普通函数如果通过new
调用,new.target
会返回该函数的引用。
此属性主要:用于确定构造函数是否为new调用的。
-
箭头函数的this指向全局对象,在箭头函数中使用箭头函数会报错
let a = () => { console.log(new.target); // 报错:new.target 不允许在这里使用 }; a();
-
箭头函数的this指向普通函数,它的new.target就是指向该普通函数的引用。
new bb(); function bb() { let a = () => { console.log(new.target); // 指向函数bb:function bb(){...} }; a(); }
更多关于new.target
可以看一下阮一峰老师关于这部分的解释。
箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
如下示例,普通函数的函数参数支持重命名,后面出现的会覆盖前面的,箭头函数会抛出错误:
function func1(a, a) {
console.log(a, arguments); // 2 [1,2]
}
var func2 = (a,a) => {
console.log(a); // 报错:在此上下文中不允许重复参数名称
};
func1(1, 2); func2(1, 2);
箭头函数相对于普通函数语法更简洁优雅:
讲道理,语法上的不同,也属与它们两个的区别!
-
箭头函数都是匿名函数,并且都不用写
function
-
只有一个参数的时候可以省略括号:
var f = a => a; // 传入a 返回a
-
函数只有一条语句时可以省略
{}
和return
var f = (a,b,c) => a; // 传入a,b,c 返回a
-
简化回调函数,让你的回调函数更优雅:
[1,2,3].map(function (x) {
return x * x;
}); // 普通函数写法
[1,2,3].map(x => x * x); // 箭头函数只需要一行
箭头函数的注意事项及不适用场景
箭头函数的注意事项
-
一条语句返回对象字面量,需要加括号,或者直接写成多条语句的
return
形式,否则像func中演示的一样,花括号会被解析为多条语句的花括号,不能正确解析
var func1 = () => { foo: 1 }; // 想返回一个对象,花括号被当成多条语句来解析,执行后返回undefined
var func2 = () => ({foo: 1}); // 用圆括号是正确的写法
var func2 = () => {
return {
foo: 1 // 更推荐直接当成多条语句的形式来写,可读性高
};
};
- 箭头函数在参数和箭头之间不能换行!
var func = ()
=> 1; // 报错: Unexpected token =>
- 箭头函数的解析顺序相对靠前
MDN: 虽然箭头函数中的箭头不是运算符,但箭头函数具有与常规函数不同的特殊运算符优先级解析规则
let a = false || function() {}; // ok
let b = false || () => {}; // Malformed arrow function parameter list
let c = false || (() => {}); // ok
箭头函数不适用场景:
围绕两点:箭头函数的this意外指向和代码的可读性。
- 定义字面量方法,this的意外指向。
因为箭头函数的简洁
const obj = {
array: [1, 2, 3],
sum: () => {
// 根据上文学到的:外层没有普通函数this会指向全局对象
return this.array.push('全局对象下没有array,这里会报错'); // 找不到push方法
}
};
obj.sum();
上述栗子使用普通函数或者ES6中的方法简写的来定义方法,就没有问题了:
// 这两种写法是等价的
sum() {
return this.array.push('this指向obj');
}
sum: function() {
return this.array.push('this指向obj');
}
还有一种情况是给普通函数的原型定义方法的时候,通常会在普通函数的外部进行定义,比如说继承/添加方法的时候。
这时候因为没有在普通函数的内部进行定义,所以this会指向其他普通函数,或者全局对象上,导致bug!
- 回调函数的动态this
下文是一个修改dom文本的操作,因为this指向错误,导致修改失败:
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
this.innerHTML = 'Clicked button'; // this又指向了全局
});
相信你也知道了,改成普通函数就成了。
-
考虑代码的可读性,使用普通函数
-
函数体复杂:
具体表现就是箭头函数中使用多个三元运算符号,就是不换行,非要在一行内写完,非常恶心!
-
行数较多
-
函数内部有大量操作
-
内容小结:
普通函数和箭头函数的区别:
- 箭头函数没有
prototype
(原型),所以箭头函数本身没有this - 箭头函数的this在定义的时候继承自外层第一个普通函数的this。
- 如果箭头函数外层没有普通函数,严格模式和非严格模式下它的this都会指向
window
(全局对象) - 箭头函数本身的this指向不能改变,但可以修改它要继承的对象的this。
- 箭头函数的this指向全局,使用arguments会报未声明的错误。
- 箭头函数的this指向普通函数时,它的
argumens
继承于该普通函数 - 使用
new
调用箭头函数会报错,因为箭头函数没有constructor
- 箭头函数不支持
new.target
- 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
- 箭头函数相对于普通函数语法更简洁优雅
箭头函数的注意事项及不适用场景
箭头函数的注意事项:
- 箭头函数一条语句返回对象字面量,需要加括号
- 箭头函数在参数和箭头之间不能换行
- 箭头函数的解析顺序相对
||
靠前
不适用场景:箭头函数的this意外指向和代码的可读性。