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ù),并且簡化了函數(shù)定義。箭頭函數(shù)有兩種格式,一種只包含一個表達式,連{ ... }和return都省略掉了。還有一種可以包含多條語句,這時候就不能省略{ ... }和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,會捕獲其所在的上下文的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)用一個函數(shù)時,只傳入了一個參數(shù),對 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 永遠指向其上下文的 this ,任何方法都改變不了其指向,如 call() ,bind(), apply()
- 普通函數(shù)的this指向調(diào)用它的那個對象
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 一文徹底講通JavaScript普通函數(shù)與箭頭函數(shù)的區(qū)別
- 深度解析JavaScript箭頭函數(shù)與普通函數(shù)兩種工作方式
- 一文詳解JavaScript普通函數(shù)與箭頭函數(shù)的本質(zhì)區(qū)別與使用場景
- 一篇文章詳細講解JavaScript中的this(普通函數(shù)、箭頭函數(shù)、?函數(shù)運用)
- JavaScript箭頭函數(shù)與普通函數(shù)的區(qū)別示例詳解
- JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
- JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別
- JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
- JavaScript 普通函數(shù)與箭頭函數(shù)的區(qū)別小結(jié)
相關(guān)文章
javascript使用輸出語句實現(xiàn)網(wǎng)頁特效代碼
這篇文章主要介紹javascript使用輸出語句實現(xiàn)網(wǎng)頁特效,有需要的朋友可以參考下2015-08-08
javascript打印大全(打印頁面設(shè)置/打印預(yù)覽代碼)
打印頁面設(shè)置,打印頁面預(yù)覽在打印過程中經(jīng)常會遇到,網(wǎng)上搜集整理了一些實用的打印方法與大家分享,感興趣的朋友可以了解下哈2013-03-03
JavaScript生成器函數(shù)Generator解決異步操作問題
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator解決異步操作問題示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10

