ES6函式比對ES5函式

2021-09-11 09:54:19 字數 4658 閱讀 9597

這裡只做簡單的es6函式與es5函式對比，把es6函式中新增的方法或者用法介紹一下。方便大家學習、記憶。隨著社會發展，瀏覽器肯定會在不久全部支援es6語法，因為現在的ie8使用者都很少了,做web前端將不再受此束縛！

其他語言已經支援函式引數預設值，咱們js也不會落後的。例：

//es6寫法


/** * @a 預設值10


* @b 預設值20


* */


function fn(a=10,b=20)


fn();//沒有傳遞引數


fn(1,3);//傳遞了引數


//es5寫法


/** * @a 預設值10


* @b 預設值20


* */


function fn(a, b) 


複製**
先說說es5寫法這種寫法，如果a傳遞的是false或者（求值為false的值） 則a會使用預設值10，這樣**就沒有按照我們期望的那樣去執行。

//修改es5寫法讓它實現類似於es6：


//es5寫法


/** * @a 預設值10


* @b 預設值20


* */


function fn(a, b) 


複製**
es6寫法如果傳入undefined，將觸發該引數等於預設值，其他值不會觸發預設值。

es6設定預設引數值，在函式體內不允許再次使用let或者const宣告。例：

/**


* es6寫法


* @a 預設值10


* @b 預設值20


* */


function fn(a=10,b=20)


複製**
設定引數預設值會產生單獨的作用域。

/**


* es6寫法


* 預設值會產生單獨的作用域，作用域的**也是按照先左後右順序執行。


* @a 預設值10


* @b 預設值10+20


* */


function fn(a=10,b=a+20)


//複雜的例子


/*-----------一條華麗的分割線-------------*/


/** * ----------預設值會產生單獨的作用域-----------


* 呼叫函式fn 時，未傳遞引數，【預設引數單獨作用域】a值為undefined，b值為undefined。


* 當執行b()函式時，則查詢到a值為undefined,不在查詢全域性a。


* 因此為結果為：a的值為： undefined


* */


var a='全域性變數';


function fn(a,b=function


())fn();//a的值為： undefined


/** * ----------預設值會產生單獨的作用域-----------


* 呼叫函式fn 時，未傳遞引數，b值為undefined。


* 當執行b()函式時，則尋找a值發現全域性a。


* 因此為結果為：a的值為： 全域性變數


* */


var a='全域性變數';


function fn(b=function


())fn();//a的值為： 全域性變數


** * 現在再來理解一下這個。看看你能答對嗎？


* */


var a = '小小坤';


function fn(a, y = function


() ) 


fn() // 答案是？


console.log(a); // 答案是？


複製**
使用引數預設值時，函式不能有同名引數。

function fn(a,a,b)


function fn(a,a,b=1)


複製**
es6 引入 rest 引數（形式為...變數名），用於獲取函式的多餘引數，這樣就不需要使用arguments物件了。rest 引數搭配的變數是乙個陣列，該變數將多餘的引數放入陣列中。例：

//es6寫法


/** * @b 引數列表


* * */


function fn(...b)


fn(1,'20');//[1, "20", "小小坤"]


//es5寫法


/** * @a 引數a


* @b 引數b


* */


function fn(a, b) 


複製**
需要注意的是：

函式length 屬性不包含rest 引數

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


(function(...a) {}).length // 0


(function(a, ...b) {}).length // 1


複製**
rest 引數不可以這樣使用,只能是最後乙個引數

function fn (a,...b,d)


複製**
使用時注意事項：
1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。


2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲乙個錯誤。


3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。


4）不可以使用yield命令，因此箭頭函式不能用作 generator 函式。


複製**
簡單例子
/*-----------例子--1------*/


//es6寫法


var fn = n => n;


//等同於es5 寫法


var fn = function(n) ;


複製**
/*-----------例子--2------*/


//es6寫法


var fn = () => 5;


// 等同於 es5 寫法


var fn = function


() ;


複製**
/*-----------例子--3------*/


//es6寫法


var sum = (n1, n2) => n1 + n2;


// 等同於es5 寫法


var sum = function(n1, n2) ;


複製**
如果箭頭函式的**塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。

/*-----------例子--4------*/


//es6寫法


var sum = (n1, n2) => 


//由於大括號被解釋為**塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號，否則會報錯。


// 報錯


let fn = id => ;


// 不報錯


let fn = id => ();


複製**
/*-----------例子--5------*/


function


fn() , 100);


}var id = 21;


fn.call();


// id: 42


//es5**需要這樣寫


function


fn() , 100);


}var id = 21;


fn.call();


/** * 上面**中，settimeout的引數是乙個箭頭函式，這個箭頭函式的定義生效是在fn函式生成時，


* 而它的真正執行要等到 100 毫秒後。如果是普通函式，執行時this應該指向全域性物件window，


* 這時應該輸出21。但是，箭頭函式導致this總是指向函式定義生效時所在的物件（本例是），


* 所以輸出的是42。


* 箭頭函式可以讓settimeout裡面的this，繫結定義時所在的作用域，而不是指向執行時所在的作用域。


* * */


複製**
this指向

//this指向lib


var lib=,


init


(), click


(),2000); }}


lib.init();//小小坤


複製**
不能使用建構函式

var des=(n)=>;


new des(1);//des is not a constructor


//因為沒有this


複製**
沒有arguments屬性

var des=(n)=>;


des();//arguments is not defined


//可以這樣使用


var des=(...n)=>;


des(1,2,3,4,5);//[1,2,3,4,5]


複製**
經過以上對比可以看出es6寫的**會越來越少，**質量也逐漸提公升。比如預設引數，箭頭函式，還有rest 引數，使用起來爽爆棚！沒有在開發環境使用的es6的同學我們也要抓緊學習啦！

ES5與ES6建構函式

function 函式名 引數 函式名.prototype.方法名 function class 類名 方法名稱 1.定義建構函式 es5 function 函式名定義 es6 class 類名定義 注 class建構函式類名後沒有 2.定義例項化物件屬性和屬性值 es5 function 函式中定...

ES5建構函式與ES6類

es5的建構函式 function f name f.prototype.writecss function f.writejs function 定義在類上的靜態屬性 let f new f f.writecss f.writejs es6的類 class f writecss static wr...

ES6建構函式class 和 ES5建構函式語法

在說建構函式之前，我們先講一講物件導向程式設計。所謂的物件導向程式設計,是一種程式設計思想和書寫方式方法，它是將程式封裝在物件內，並給物件設定屬性和屬性值。而這個封裝程式的物件我們稱之為例項化物件，而生成例項化物件的函式就是建構函式。一般情況下，為了和普通函式區別，我們將建構函式的首字母大寫。接下來...