es6--箭頭函數

基本用法

ES6允許使用“箭頭”(=>)定義函數。

var f = v => v;

上面的箭頭函數等同于:

var f = function(v) {return v;
};

如果箭頭函數不需要參數或需要多個參數,就使用一個圓括號代表參數部分。

復制代碼
var f = () => 5;
// 等同于
var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {return num1 + num2;
};
復制代碼

如果箭頭函數的代碼塊部分多于一條語句,就要使用大括號將它們括起來,并且使用return語句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括號被解釋為代碼塊,所以如果箭頭函數直接返回一個對象,必須在對象外面加上括號。

var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數可以與變量解構結合使用。

復制代碼
const full = ({ first, last }) => first + ' ' + last;// 等同于
function full(person) {return person.first + ' ' + person.last;
}
復制代碼

使用注意點

箭頭函數有幾個使用注意點。

(1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。

(2)不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤。

(3)不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用Rest參數代替。

(4)不可以使用yield命令,因此箭頭函數不能用作Generator函數。

this指向的固定化,并不是因為箭頭函數內部有綁定this的機制,實際原因是箭頭函數根本沒有自己的this,導致內部的this就是外層代碼塊的this。正是因為它沒有this,所以也就不能用作構造函數。

除了this,以下三個變量在箭頭函數之中也是不存在的,指向外層函數的對應變量:argumentssupernew.target

復制代碼
function foo() {setTimeout(() => {console.log('args:', arguments);}, 100);
}foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]
復制代碼

上面代碼中,箭頭函數內部的變量arguments,其實是函數fooarguments變量。

另外,由于箭頭函數沒有自己的this,所以當然也就不能用call()apply()bind()這些方法去改變this的指向。

復制代碼
(function() {return [(() => this.x).bind({ x: 'inner' })()];
}).call({ x: 'outer' });
// ['outer']
復制代碼

上面代碼中,箭頭函數沒有自己的this,所以bind方法無效,內部的this指向外部的this

長期以來,JavaScript語言的this對象一直是一個令人頭痛的問題,在對象方法中使用this,必須非常小心。箭頭函數”綁定”this,很大程度上解決了這個困擾。

函數綁定

箭頭函數可以綁定this對象,大大減少了顯式綁定this對象的寫法(callapplybind)。但是,箭頭函數并不適用于所有場合,所以ES7提出了“函數綁定”(function bind)運算符,用來取代callapplybind調用。雖然該語法還是ES7的一個提案,但是Babel轉碼器已經支持。

函數綁定運算符是并排的兩個雙冒號(::),雙冒號左邊是一個對象,右邊是一個函數。該運算符會自動將左邊的對象,作為上下文環境(即this對象),綁定到右邊的函數上面。

復制代碼
foo::bar;
// 等同于
bar.bind(foo);foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {return obj::hasOwnProperty(key);
}
復制代碼

如果雙冒號左邊為空,右邊是一個對象的方法,則等于將該方法綁定在該對象上面。

復制代碼
var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;let log = ::console.log;
// 等同于
var log = console.log.bind(console);
復制代碼

由于雙冒號運算符返回的還是原對象,因此可以采用鏈式寫法。

尾調用優化

什么是尾調用?

尾調用(Tail Call)是函數式編程的一個重要概念,本身非常簡單,一句話就能說清楚,就是指某個函數的最后一步是調用另一個函數。

function f(x){return g(x);
}

上面代碼中,函數f的最后一步是調用函數g,這就叫尾調用。

“尾調用優化”(Tail call optimization),即只保留內層函數的調用幀。如果所有函數都是尾調用,那么完全可以做到每次執行時,調用幀只有一項,這將大大節省內存。這就是“尾調用優化”的意義。

嚴格模式

ES6的尾調用優化只在嚴格模式下開啟,正常模式是無效的。

這是因為在正常模式下,函數內部有兩個變量,可以跟蹤函數的調用棧。

  • func.arguments:返回調用時函數的參數。
  • func.caller:返回調用當前函數的那個函數。

尾調用優化發生時,函數的調用棧會改寫,因此上面兩個變量就會失真。嚴格模式禁用這兩個變量,所以尾調用模式僅在嚴格模式下生效。

復制代碼
function restricted() {"use strict";restricted.caller;    // 報錯restricted.arguments; // 報錯
}
restricted();
復制代碼
 

箭頭函數與常規函數對比

一個箭頭函數與一個普通的函數在兩個方面不一樣:

  • 下列變量的構造是詞法的:?arguments?,?super?,?this?,?new.target
  • 不能被用作構造函數:沒有內部方法?[[Construct]]?(該方法允許普通的函數通過?new?調用),也沒有?prototype?屬性。因此,?new (() => {})?會拋出錯誤。

除了那些意外,箭頭函數和普通的函數沒有明顯的區別。例如,?typeof?和?instanceof?產生同樣的結果:

復制代碼
> typeof () => {}
//'function'
> () => {} instanceof Function
//true> typeof function () {}
//'function'
> function () {} instanceof Function
//true
復制代碼

函數表達式和對象字面量是例外,這種情形下必須放在括號里面,因為它們看起來像是函數聲明和代碼塊。

轉載于:https://www.cnblogs.com/weirdoQi/p/6876887.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/254558.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/254558.shtml
英文地址,請注明出處:http://en.pswp.cn/news/254558.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

halcon Bit圖位像素處理算子,持續更新

目錄bit_andbit_lshiftbit_maskbit_notbit_orbit_rshiftbit_slicebit_xorbit_and 功能:輸入圖像的所有像素的逐位與。 bit_lshift 功能:圖像的所有像素的左移。 bit_mask 功能:使用位掩碼的每個像素的邏輯與。 bit_not 功能&#xff1…

NYOJ題目839合并

--------------------------- AC代碼: 1 import java.util.Scanner;2 3 public class Main {4 5 public static void main(String[] args) {6 7 8 Scanner scnew Scanner(System.in);9 10 int timessc.nextInt(); 11 …

指針的魅力

序 指針說:love me,love me! 但是他對指針說:I hate u,I hate u! …… 指針僅僅是作為指針,我們可以把它當做有用的工具,為我們提供便利與好處。說起工具不得不讓我想起一樣東西—…

python多進程

2019獨角獸企業重金招聘Python工程師標準>>> python多進程 進程簡介 進程是程序在計算機上的一次執行活動。當你運行一個程序,你就啟動了一個進程。顯然,程序是死的(靜態的),進程是活的(動態的)。進程可以分為系統進程和用戶進程。…

halcon彩色圖像顏色處理算子,持續更新

目錄apply_color_trans_lutcfa_to_rgbtrans_to_rgbclear_color_trans_lutcreate_color_trans_lutgen_principal_comp_translinear_trans_colorprincipal_comprgb1_to_grayrgb3_to_graytrans_from_rgbapply_color_trans_lut 功能:申請使用顏色查找表。 cfa_to_rgb …

奪命雷公狗---node.js---20之項目的構建在node+express+mongo的博客項目5mongodb在項目中實現添加數據...

我們上一步就引入了mongodb了,那么下一步就要開始寫添加數據了,不過有個前提是先將表單的數據處理好: 最基本的這部現在已經成功了,因為最基本的這步就是先將表單處的提交方式和提交地址給處理好,這里和PHP的基本上是一…

重新綁定ItemsSource先設置ItemsSource = null;的原因

即報錯信息為:在使用 ItemsSource 之前,項集合必須為空。原因:Items和ItemSource,只能有一個生效,想用其中一個,另一個必須是空。重新綁定ItemSource,雖然綁定的集合對象Clear了,但是…

敏捷開發學習

Scrum 敏捷開發,績效管理,團隊管理,企業管理,ASP.net MVC 敏捷開發 培訓|咨詢 工具開發 課題研討 http://blog.csdn.net/cheny_com/article/category/794542 http://blog.csdn.net/vincetest/article/category/650747 http://blog…

Git commit后,本地代碼丟失解決方法

問題描述: 提交代碼時,rebase了兩次,本地代碼丟失了,嚇得我差點跳起來。解決方法如下: 1、執行命令: git reflog d6ea731 (HEAD -> dev, origin/dev, master) HEAD{0}: checkout: moving from master to…

Edges圖像邊緣處理halcon算子,持續更新

目錄close_edgesclose_edges_lengthderivate_gaussdiff_of_gaussedges_coloredges_color_sub_pixedges_imageedges_sub_pixfrei_ampfrei_dirhighpass_imageinfo_edgeskirsch_ampkirsch_dirlaplacelaplace_of_gaussprewitt_ampprewitt_dirrobertsrobinson_amprobinson_dirsobel_…

Android存儲數據方式

可以查看Android開發文檔中的:/docs/guide/topics/data/data-storage.html Android provides several options for you to save persistent application data. The solution you choose depends on your specific needs, such as whether the data should be privat…

防止cpu 一直被占用 sleep(0) 和 yield

在java的Thread類中有兩個有用的函數,sleep和yield,sleep就是線程睡眠一定的時間,也就是交出cpu一段時間,yield用來暗示系統交出cpu控制權。這兩個函數在多線程開發的時候特別有用,可以合理的分配cpu,提高程…

做一個有膽識的有為青年

1、一個年輕人,如果在這四年的時間里,沒有任何想法,他這一生,就基本這個樣子,沒有多大改變了。 2、成功者就是膽識加魄力,曾經在火車上聽人談起過溫州人的成功,說了這么三個字,“膽…

jstack應用-查找CPU飚高的原因

場景 在系統上線后,經常會遇到運維的同學跑過來說:“這次發版后,cpu線程使用率到一場,到100%了”。這時候不要慌,可以使用堆轉儲來分析到底是哪個線程引起的。 查找元兇 [rootjava_mofei_01 test]# top Mem: 16333644…

Enhancement增強圖形halcon算子,持續更新

目錄coherence_enhancing_diffemphasizeequ_histo_imageilluminatemean_curvature_flowscale_image_max_shock_filtercoherence_enhancing_diff 功能:執行一個圖像的一個一致性增強擴散。 emphasize 功能:增強圖像對比度。 equ_histo_image 功能&am…

音頻中采樣位數,采樣率,比特率的名詞解釋(轉)

采樣位數(采樣大小): 采樣位數可以理解為采集卡處理聲音的解析度。這個數值越大,解析度就越高,錄制和回放的聲音就越真實。我們首先要知道:電腦中的聲音文件是用數字0和1來表示的。所以在電腦上錄音的本質就…

WebSocket實時異步通信

WebSocket實時異步通信 【一】WebSocket簡介 WebSocket是HTML5推出一個協議規范,用來B/S模式中服務器端和客戶端之間進行實時異步通信。 眾所周知,傳統的HTTP協議中,服務器端和客戶端通信只能是在客戶端發送一個請求之后,服務器端…

多線程和多進程的區別(小結)

分類: linux 2009-06-19 09:33 11501人閱讀 評論(15) 收藏 舉報 很想寫點關于多進程和多線程的東西,我確實很愛他們。但是每每想動手寫點關于他們的東西,卻總是求全心理作祟,始終動不了手。 今天終于下了決心,寫點東西…

redis-cli使用密碼登錄

redis-cli使用密碼登錄 注意IP地址要寫正確! 學習了: https://blog.csdn.net/lsm135/article/details/52932896 https://blog.csdn.net/zyz511919766/article/details/42268219 https://zhidao.baidu.com/question/756651357338691604.html 登錄后 auth pass 或者 r…

FFT快速傅式變換算法halcon算子,持續更新

目錄convol_fftconvol_gaborcorrelation_fftdeserialize_fft_optimization_dataenergy_gaborfft_genericfft_imagefft_image_invgen_bandfiltergen_bandpassgen_derivative_filtergen_filter_maskgen_gaborgen_gauss_filtergen_highpassgen_lowpassgen_mean_filtergen_sin_band…