JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別詳解
本文為大家講解了JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別，供大家參考，具體內(nèi)容如下
箭頭函數(shù)：
let fun = () => {
console.log('lalalala');
}
普通函數(shù)：
function fun() {
console.log('lalla');
}
箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡(jiǎn)化了函數(shù)定義。箭頭函數(shù)有兩種格式，一種只包含一個(gè)表達(dá)式，連{ ... }和return都省略掉了。還有一種可以包含多條語句，這時(shí)候就不能省略{ ... }和return。
箭頭函數(shù)是匿名函數(shù)，不能作為構(gòu)造函數(shù)，不能使用new
let FunConstructor = () => {
console.log('lll');
}
let fc = new FunConstructor();
箭頭函數(shù)不綁定arguments，取而代之用rest參數(shù)...解決
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]
箭頭函數(shù)不綁定this，會(huì)捕獲其所在的上下文的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()();
箭頭函數(shù)通過 call() 或 apply() 方法調(diào)用一個(gè)函數(shù)時(shí)，只傳入了一個(gè)參數(shù)，對(duì) 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
箭頭函數(shù)沒有原型屬性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}
箭頭函數(shù)不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字
總結(jié)
- 箭頭函數(shù)的 this 永遠(yuǎn)指向其上下文的 this ，任何方法都改變不了其指向，如 call() ,bind(), apply()
- 普通函數(shù)的this指向調(diào)用它的那個(gè)對(duì)象
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈担缓髮?duì)變量進(jìn)行賦值，稱為解構(gòu)。只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值，這種寫法屬于“模式匹配”。統(tǒng)稱起來就叫做“解構(gòu)賦值”。2021-05-05
在JavaScript中,Promise是一種用于處理異步操作的對(duì)象,它代表一個(gè)異步操作的最終完成（或失?。┘捌浣Y(jié)果值,本文通過實(shí)例代碼給大家介紹JavaScript中的Promise從入門到精通,感興趣的朋友跟隨小編一起看看吧2025-10-10
原生JavaScript實(shí)現(xiàn)異步多文件上傳
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)異步多文件上傳，感興趣的小伙伴們可以參考一下2015-12-12
用JavaScript實(shí)現(xiàn)UrlEncode和UrlDecode的腳本代碼
用js自定義函數(shù)寫的實(shí)現(xiàn)url加密解密的實(shí)現(xiàn)代碼，需要的朋友可以參考下2008-07-07
這篇文章主要介紹了JS判斷當(dāng)前頁面是否在微信瀏覽器打開的方法,涉及JavaScript針對(duì)客戶端的相關(guān)判定技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
Array數(shù)組對(duì)象中的forEach、map、filter及reduce詳析
這篇文章主要給大家介紹了關(guān)于Array數(shù)組對(duì)象中forEach、map、filter及reduce的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用array數(shù)據(jù)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
基于JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
本文主要介紹了javascript中apply/call和bind的使用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
window.print()打印根據(jù)高度設(shè)置居中顯示和布局(縱向橫向)
本文主要介紹了window.print()打印根據(jù)高度設(shè)置居中顯示和布局(縱向橫向)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本文主要介紹了轉(zhuǎn)義字符及URI編碼的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02