js之function

function*

 

function* 這種聲明方式(function關鍵字後跟一個星號）會定義一個生成器函數 (generator function)，它返回一個  Generator  對象。

你也能夠定義 生成器函數  使用構造函數  GeneratorFunction 和一個  function* expression 。

語法

function* name([param[, param[, ... param]]]) { statements } 

name

函數名

param

要傳遞給函數的一個參數的名稱，一個函數最多能夠有255個參數。

statements

普通JS語句。

描述

生成器函數在執行時能中途退出，後面又能從新進入繼續執行。並且在函數內定義的變量的狀態都會保留，不受中途退出的影響。

調用一個生成器函數並不會立刻執行它裏面的語句，而是返回一個這個生成器的迭代器（iterator）對象。當這個迭代器的 next() 方法被首次（後續）調用時，其內的語句會執行到第一個（後續）出現yield表達式的位置爲止，該表達式定義了迭代器要返回的值，或者被 yield*委派至另外一個生成器函數。next()方法返回一個對象，這個對象包含兩個屬性：value 和 done，value 屬性表示本次 yield 表達式的返回值，done 屬性爲布爾類型，表示生成器是否已經產出了它最後的值，即生成器函數是否已經返回。

調用 next() 方法時，若是傳入了參數，那麼這個參數會取代生成器函數中對應執行位置的 yield 表達式（整個表達式被這個值替換）

當在生成器函數中顯式 return 時，會致使生成器當即變爲完成狀態，即調用 next() 方法返回的對象的 done 爲 true。若是 return了一個值，那麼這個值會做爲下次調用 next() 方法返回的 value 值。

示例

簡單示例

• function* idMaker(){
• var index = 0;
• while(index<3)
• yield index++;
• }
•  
• var gen = idMaker();
•  
• console.log(gen.next().value); // 0
• console.log(gen.next().value); // 1
• console.log(gen.next().value); // 2
• console.log(gen.next().value); // undefined

•  

Arrow function

基本用法

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函數。

指向的固定化，並非由於箭頭函數內部有綁定的機制，實際緣由是箭頭函數根本沒有本身的，致使內部的就是外層代碼塊的。正是由於它沒有，因此也就不能用做構造函數。

thisthisthisthisthisthis

除了this，如下三個變量在箭頭函數之中也是不存在的，指向外層函數的對應變量：arguments、super、new.target。

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

上面代碼中，箭頭函數內部的變量arguments，實際上是函數foo的arguments變量。

另外，因爲箭頭函數沒有本身的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對象的寫法（call、apply、bind）。可是，箭頭函數並不適用於全部場合，因此ES7提出了「函數綁定」（function bind）運算符，用來取代call、apply、bind調用。雖然該語法仍是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

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