ES6 04 函式的擴充套件

2022-07-28 05:18:11 字數 3643 閱讀 8531

es6 針對新的語法特性(解構、引數預設值、箭頭語句、塊級作用域let),對於函式的屬性、引數、作用域進行了擴充套件,並對遞迴調導致記憶體棧溢位用進行了優化。

同時es6規定,只要函式引數使用了預設值、解構賦值、擴充套件運算子,函式內部都不可以使用嚴格模式(es5可以),否則會報錯;

1. 函式引數預設值
es6之前,函式定義/聲名時不能指定預設值;es6可以在函式定義時進行初始化;同時有以下幾點需要注意:

function sum(...values)

return sum;

}sum(1,2,3,4);//10

function fn(x,y=5,z)

fn(); // [undefined,5,undeifined]

fn(1); //[1,5,undefiend]

fn(1,2);// [1,2,undefined]

fn(1,,3);//報錯

fn(1,undefined,3);//[1,5,3]

// 寫法一

function fn1(={})

//寫法二

function fn2(=)

// ① 函式無引數

fn1(); // [0,0]

fn2(); // [0,0]

// ② x、y都無值情況;

fn1({}); // [0,0]

fn2({}); // [undefined,undefined]

// ③x有值,y無值;

fn1(}); // [3,0]

fn2(); // [3,undefiend]

2.函式作用域
函式引數設定預設值後,函式初始化時,引數會形成乙個單獨的作用域;等到初始化完成後,這個作用域消失;不設定預設值時,該機制不生效;

// ① 函式引數獨立作用域機制賦值:

let x=1;

function fn1(x,y=x);

fn1(2);//2

//② 函式引數獨立作用域+作用域鏈

let a=1;

function fn2(b=a);

fn2();//1

// ③ 函式引數單獨作用域+作用域鏈

function fn3(e=d)

fn3();// referenceerror:e is not defiined

// ④ 引數賦初值+let 暫時性死區 =>報錯

let j=2;

function fn4(j=j)

fn4();//referenceerror:j is not defined

3. 函式新增屬性
①將匿名函式賦值給變數,es5中該屬性返回空字串"",而es6返回實際函式名;②function建構函式返回函式例項,name屬性返回anoymous,bind返回的函式,name屬性加上bound字首:

(new function).name;         //"anoymous"

function fn(){};

fn.bind({}).name; // "bound fn"

(function(){}).bind({}).name; // "bound"

(function(a){}).length;//1

(function(a=1){}).length;//0

(fucntion(a,b,c=5){}).length;//2

(function(..args){}).length;//0

(function(a,b=1,c,d){}).length;//1

4. 箭頭函式——()=>{}
箭頭函式不存在單獨的作用域,即不存在單獨的this、arguments、super、new.target;這四個物件分別指向外層函式對應的變數;

箭頭函式中this指向固化並不是箭頭函式內部有繫結this的機制,相反,本質原因是箭頭函式根本沒有自己的this,導致箭頭函式內部的this就是外層**塊的this,也正是因為沒有this,即沒有獨自的作用域,所以不能用作建構函式;

1.注意事項
function timer(),1000);

}var timer=new timer();

settimeout(()=>console.log('s1:',timer.s1),3100); // s1:3

settimeout(()=>console.log('s2:',timer.s2),3100); // s2:0

2. 箭頭函式使用場景
const plus=a=>a+1;

const mult=b=>b*2;

mult(plus(5));//12

const pipeline=((...fns)=>val=>fns.reduce((a,b)=>b(a),val));

const addthenmult=pipeline(plus,mult);

addthenmult(5);//12

5.函式優化

四個概念:呼叫幀、尾呼叫函式、尾遞迴函式、蹦床函式、函式柯里化(currying)

function fn1()              // 呼叫後還有其他操作

function fn2() // 不是最後一步操作

function fn3() // 返回 undeifend

// ① es6尾遞迴優化案例:階乘

function fn1(n)

fn1(5; // 120

funcion fn1optimize(n,tatal)

fn1optimize(5,1); //120

// ② es6尾遞迴優化案例: 斐波那數列

function fibonacci(n)

fibonacci(10); //89

fibonacci(100); //堆疊溢位

fibonacci(1000); // 堆疊溢位

function fibonacciopt(n,a1=1,a2=1)

fibonacciopt(10); //89

fibonacciopt(100); // 573147844013817200000

fibonacciopt(1000); // 49 7.0330367711422765e+208

fibonacciopt(10000);// infinity 或 uncaught rangeerror: maximum call stack size exceeded

function trampoline(fn);

return fn;

}

function currying(fn,n)

}

ps:

前端技術 ES6(04)

const persion sayhiasync1 function 1000 sayhiasync2 function 1000 abc function persion.sayhi this.name jerry persion.sayhi persion.sayhiasync1 settime...

ES6 04常用的解構

其他解構 1.es6除了提供物件和陣列解構,還提供很多適用的解構方案 2.若你想要讓乙個普通的值進行交換,不必需要第三個變數 let key 1 let value mr.lee key,value value,key 解構操作,變數互換 console.log key console.log va...

ES6 函式的擴充套件

在es5中有這種情況 function fn a,b fn 30 fn 0,10 20因為a 0,所以將10賦給它在es6中 function fn a 10,b 20 fn 30 fn 0,10 10rest 引數形式為 變數名 用於獲取函式的多餘引數,這樣就不需要使用arguments物件了。r...