當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js箭头函数和普通函数区别

發(fā)布時(shí)間：2023/12/2 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 js箭头函数和普通函数区别小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js箭頭函數(shù)和普通函數(shù)區(qū)別

實(shí)驗(yàn)環(huán)境：nodejs v12.16.1

箭頭函數(shù)不能作為構(gòu)造函數(shù)，而普通函數(shù)可以

箭頭函數(shù)沒有原型，而普通函數(shù)有

箭頭函數(shù)return可以省略語句塊。(如果=>右邊不是語句塊，則代表return右邊的表達(dá)式或?qū)ο?

箭頭函數(shù)不綁定arguments(注意：瀏覽器環(huán)境下獲取箭頭函數(shù)的arguments會(huì)報(bào)錯(cuò))，而普通函數(shù)argument綁定了參數(shù)列表對(duì)象

this指向問題[重點(diǎn)，也是難點(diǎn)]

箭頭函數(shù)的this指向上層函數(shù)作用域的this對(duì)象，如果沒有上層函數(shù)作用域，則指向頂部this（在瀏覽器中頂部this則是window）。普通函數(shù)的this指向該函數(shù)的調(diào)用者。
call, apply, bind會(huì)改變普通函數(shù)的this，但不會(huì)改變箭頭函數(shù)的this

實(shí)踐是檢驗(yàn)真理的有效標(biāo)準(zhǔn)，在此，我們必須更加深入了解，再耐心看一個(gè)復(fù)雜的例子：
依然是nodejs環(huán)境下：

data = 40; // 全局作用域賦予data=40 this.data = 30; // 給頂部this賦予data=30 let pig = {data: 80, }; let o = {data: 10,a(n) {let f = (n) => {// 分析如下：// 首先f是箭頭函數(shù)，那么f的this指向上層函數(shù)作用域的this，f的上層函數(shù)作用域是a，因此f的this指向a的this// 由于a是普通函數(shù)，因此a的this指向a的調(diào)用方// 因此f的this指向a的調(diào)用方return n + this.data;};return f(n);},b(n) {let f = (n) => {return n + this.data;};let other = {data: 20,};// 分析如下：// 和函數(shù)a的情形分析一樣，這里的f的this指向是b的調(diào)用方// 然而 call,bind,apply 并不會(huì)改變箭頭函數(shù)的調(diào)用方，因此f.call(other, n)并不會(huì)把this指向otherreturn f.call(other, n);},c(n) {let f = function (n) {// 分析如下:// f是普通函數(shù)，因此f的this指向f的調(diào)用方return n + this.data;};let other = {data: 20,};// 分析如下：// call會(huì)改變普通函數(shù)的調(diào)用方，因此f.call(other, n)把this指向了otherreturn f.call(other, n);},d: (n) => {let f = (n) => {// 分析如下：// f是箭頭函數(shù)，因此f的this指向上層函數(shù)作用域d的this// 由于d也是箭頭函數(shù)，由于d沒有再上層的函數(shù)作用域了，因此d的this指向頂部this// 因此f的this指向頂部thisreturn n + this.data;};return f(n);},e(n) {let f = function (n) {return n + this.data;};let other = {data: 20,};// g的this指向other了let g = f.bind(other);return g(n);},e1(n) {let f = function (n) {return n + this.data;};// 注意，nodejs下這里f的調(diào)用方是global(注意nodejs下的頂層this并不等于global，頂層this是當(dāng)前模塊的this)return f(n);},e2(n) {let f = (n) => {return n + this.data;};let other = {data: 20,};// bind對(duì)箭頭函數(shù)不起作用，f的this -> e2的this -> e2的調(diào)用方let g = f.bind(other);return g(n);}, };console.log(o.a(1)); // 11 console.log(o.b(1)); // 11 console.log(o.c(1)); // 21 console.log(o.d(1)); // 31 console.log(o.e(1)); // 21 console.log(o.e1(1)); // 41 console.log(o.e2(1)); // 11console.log(`============接下來比較復(fù)雜，但是要搞清楚=========================`);// 分析： // o.a普通函數(shù)，因此bind把o.a的this指向pig // o.a里面的f的this指向o.a的調(diào)用方，因此f的this指向pig console.log(o.a.call(pig, 1)); // 81console.log(o.b.call(pig, 1)); // 81console.log(o.c.call(pig, 1)); // 21console.log(o.d.call(pig, 1)); // 31console.log(o.e.call(pig, 1)); // 21console.log(o.e1.call(pig, 1)); // 41// 分析 // o.e2普通函數(shù)，因此bind把o.e2的this指向pig // o.e2里面的f是箭頭函數(shù)，因此f指向上層函數(shù)作用域o.e2的this，而o.e2的this指向了pig，因此f的this指向pig // o.e2里面的f是箭頭函數(shù)，不會(huì)被bind改變指向，因此g的this也指向pig console.log(o.e2.call(pig, 1)); // 81

箭頭函數(shù)內(nèi)不能用yield且不能用作Generator函數(shù)，而普通函數(shù)可以。

總結(jié)

以上是生活随笔為你收集整理的js箭头函数和普通函数区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： js实现数组降维算法[不准用Array.
下一篇：民间故事120篇短篇

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

编程问答

js箭头函数和普通函数区别

js箭頭函數(shù)和普通函數(shù)區(qū)別

總結(jié)