箭頭函式與普通函式的區別
阿新 • • 發佈:2020-08-14
箭頭函式:
let fun = () => {
console.log('lalalala');
}
普通函式:
function fun() {
console.log('lalla');
}
箭頭函式相當於匿名函式,並且簡化了函式定義。箭頭函式有兩種格式,一種只包含一個表示式,連{ ... }和return都省略掉了。還有一種可以包含多條語句,這時候就不能省略{ ... }和return。
箭頭函式是匿名函式,不能作為建構函式,不能使用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值
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();
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: ƒ}
箭頭函式不能當做Generator函式,不能使用yield關鍵字
總結
箭頭函式的 this 永遠指向其上下文的 this ,任何方法都改變不了其指向,如 call()
, bind()
, apply()
普通函式的this指向呼叫它的那個物件