深入理解ES6之函式
一:關於函式的引數:
可以接受任意數量的引數而無視函式宣告的引數數量是js函式的獨特之處。
1:引數預設值
ES6之前做法:
function makeRequest(url,timeout,callback){
timeout=timeout||2000;
callback = callback||function(){}
}
但是這樣timeout如果設定為0,還是會使用預設值。因此更安全的方法是使用typeof來檢測型別。
function makeRequest(url,timeout,callback){
timeout=(typeof timeout !=='undefined')?timeout:2000;
}
ES6做法:
functiong makeRequest(url,timeout=2000,callback=functing(){}){}
//只有在傳入undefined或者不傳時才會使用預設值 如果引數是null不適用預設值
makeRequest("xxxx",undefined,null)//第一個"xxxx",第二個使用預設值2000,第三次使用null
2:arguments物件
function mixArgs(first,second = 'b'){
arguments.length = 1
first === arguments[0] true;
second ===arguments[1] false;//second='b', arguments[1]='undefined'
}
mixArgs(1);
arguments物件的值傳入後就不在改變永遠等於初始值。
3:預設參數列達式
function getValue(value){
return value+5;
}
//表示式中可以說使用之前的引數,但不能使用後面的引數
function add (first,second=getValue(first)){
}
4:不具名引數
arguments物件包含的是傳入的全部引數,有時候操作起來還是比較麻煩。
ES6通過引入剩餘引數,可以包括顯示宣告的其他引數。
function pick(obj,..keys){
}
1:剩餘引數只能發到最後
2:剩餘引數不能再物件的setter屬性中使用,因為setter被限定為只是用單個引數,而剩餘引數是不限定數量的。
二:塊級函式:
"use strict"
if(true){
console.log(type doSomething);// "function"
function doSomething(){}
doSomething();
}
console.log(type doSomething);// "undefined" 如果是非嚴格模式這裡也會是"function"
在嚴格模式下定義的塊級函式會被提升到塊級作用域的頂部。而在非嚴格模式下會被提升至全域性作用域,因此在程式碼塊外部依然可以使用。
"use strict"
if(true){
console.log(type doSomething);// "undefined"//函式表示式不能提升 因此這裡暫時性死區
let doSomething = function(){}
doSomething();
}
console.log(type doSomething);// "undefined"
三:箭頭函式:
1:沒有this,super,arguments,也沒有new.target繫結,這些值由離箭頭函式最近的非箭頭函式來決定.
2:不嫩被使用new呼叫,箭頭函式沒有構造方法,使用new呼叫會報錯。
3:不能更改this
function createArrow(){ return ()=>argument[0]}
var arrowFunction = createArrow(5)
console.log(arrowFunction()) // 5
四:尾呼叫優化:
滿足三個條件es6在嚴格模式下會優化(非嚴格模式不變)
1:為呼叫不能引用當前棧幀的變數(意味著該函式不能是閉包)
2:進行尾呼叫的函式在返回結果後不能做額外操作
3:尾呼叫的結果作為當前函式的返回值
"use strict"
//不優化 沒有return
function doSomething(){
doSomethingElse()
}
//不優化 返回後還要執行加法
function doSomething(){
return 1+ doSomethingElse()
}
//不優化 呼叫未在尾部
function doSomething(){
let res = doSomethingElse();
return res;
}
//不優化 訪問內部變數
function doSomething(){
let num = 1;
let func = ()=>num;
return func();
}
function factorial(n){
if(n<=1){
return 1;
} else{
//不優化 返回後還要執行乘法
return n*factorial(n-1);
}
}
//優化後
function factorial(n,p=1){
if(n<=1){
return 1*p;
}else{
let result = n*p;
return factorial(n-1,result);
}
}
相關文章
- 深入理解ES6 ---- 函式函式
- 重讀《深入理解ES6》—— 函式函式
- 學習記錄--《深入理解ES6》之函式(上)函式
- 深入理解ES6中的箭頭函式函式
- 【深入淺出ES6】函式函式
- 深入理解 Generator 函式函式
- 深入理解ES6之《解構》
- 深入解析 ES6:箭頭函式函式
- 深入理解 函式、匿名函式、自執行匿名函式函式
- 深入理解ES6之《ES7》
- JavaScript函數語言程式設計之深入理解純函式JavaScript函數程式設計函式
- 深入理解函式節流與函式防抖函式
- 深入理解redux之reducer為什麼是純函式Redux函式
- 深入理解 JavaScript 回撥函式JavaScript函式
- 深入理解 JavaScript 中的函式JavaScript函式
- 深入理解ES6
- 深入理解 ES6
- ES6深入學習(二)關於函式函式
- 深入理解javascript系列(十六):深入高階函式JavaScript函式
- 從 ES6 高階箭頭函式理解函式柯里化函式
- ES6之Array.includes()函式函式
- ES6 系列之箭頭函式函式
- 深入理解Thread建構函式thread函式
- 深入理解javascript系列(十四):純函式JavaScript函式
- 深入理解ES6--3.函式函式
- 深入理解ES6 --- 物件物件
- 深入理解 ES6 PromisePromise
- 撤底理解es6中的箭頭函式函式
- 深入理解ES6之var,let,const區別
- 深入理解ES6之《改進的陣列功能》陣列
- 深入理解箭頭函式和傳統函式的區別函式
- 深入理解javascript函式系列第一篇——函式概述JavaScript函式
- ES6之函式的擴充套件函式套件
- 深入理解變數提升和函式提升變數函式
- 深入理解javascript系列(十五):高階函式JavaScript函式
- 深入理解ES6 ---- 迭代器
- 深入理解javascript函式進階系列第四篇——惰性函式JavaScript函式
- ES6系列之箭頭函式全解析函式